Preview

Installation

npx sigma-ui@latest add scroll-area

Usage

<script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area';
</script>

<template>
  <ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
    Jokester began sneaking into the castle in the middle of the night and leaving
    jokes all over the place: under the king's pillow, in his soup, even in the
    royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
    then, one day, the people of the kingdom discovered that the jokes left by
    Jokester were so funny that they couldn't help but laugh. And once they
    started laughing, they couldn't stop.
  </ScrollArea>
</template>

ScrollArea renders a vertical scrollbar. Add a <ScrollBar orientation="horizontal" /> inside it to scroll horizontally.

Examples

Horizontal Scrolling

API Reference

ScrollArea

Props

Prop	Type	Default
type Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. auto - means that scrollbars are visible when content is overflowing on the corresponding orientation. <br> always - means that scrollbars are always visible regardless of whether the content is overflowing.<br> scroll - means that scrollbars are visible when the user is scrolling along its corresponding orientation.<br> hover - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.<br> glimpse - a hybrid approach that briefly shows scrollbars when the user enters the scroll area, then hides them until further interaction.	ScrollType	-
dir The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction$2	-
scrollHideDelay If type is set to either scroll or hover, this prop determines the length of time, in milliseconds, <br> before the scrollbars are hidden after the user stops interacting with scrollbars.	number	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

ScrollBar

Props

Prop	Type	Default
orientation The orientation of the scrollbar	"vertical" | "horizontal"	"vertical"
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Accessibility

Scrolling stays native, so the content remains reachable with the keyboard and assistive technologies. Only the scrollbars are custom.

Key	Description
Tab	Moves focus to the next focusable element inside the scroll area, scrolling it into view.
ArrowUp / ArrowDown	Scrolls the focused viewport vertically, as in a native scroll container.
ArrowLeft / ArrowRight	Scrolls the focused viewport horizontally, as in a native scroll container.
PageUp / PageDown	Scrolls the focused viewport by one page.