Scroll Area
Contain overflowing content with a styled scrollbar.
Preview
Import
import { ScrollArea } from "@sigil-ui/components";Usage
<ScrollArea className="h-32 w-48 rounded-[var(--s-radius-md,6px)] border border-[color:var(--s-border)]">
<div className="p-4">Scrollable content goes here. Add more text to see scrolling behavior.</div>
</ScrollArea>Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | ScrollbarOrientation | vertical | Orientation of the scrollbar. |
scrollbarSize | number | string | — | Override token-driven scrollbar thickness for this instance. |
scrollbarClassName | string | — | Additional classes for the scrollbar track. |
thumbClassName | string | — | Additional classes for the scrollbar thumb. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-scrollbar-corner | Scrollbar corner |
--s-scrollbar-track | Scrollbar track |
--s-scrollbar-radius | Scrollbar radius |
--s-radius-full | Radius full |
--s-scrollbar-padding | Scrollbar padding |
--s-duration-fast | Duration fast |
--s-scrollbar-width | Scrollbar width |
--s-scrollbar-border | Scrollbar border |
--s-scrollbar-height | Scrollbar height |
--s-scrollbar-thumb | Scrollbar thumb |
--s-border | Border |
--s-scrollbar-thumb-hover | Scrollbar thumb hover |