Ravox KitSurfaces
Scroll Area
An area with the thin custom scrollbar instead of the system one, which appears on scroll and on hover. Edges fade when there is more content. Scrolling stays native: wheel, touch, keyboard and page search work the same.
Settings
Toggles
Examples
Filter strip on mobile
Long text with the scrollbar always visible
Grows up to a height, then scrolls
Installation
The command creates components/ui/scroll-area.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add scroll-areaProps
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "both" | "vertical" | Which direction it scrolls. |
| label | string | — | Name of the area for screen readers (it becomes a region). When there is something to scroll, the area enters the Tab order and the arrow keys scroll. |
| shadows | boolean | true | Fades the edge on the side where there is still content. |
| scrollbar | "auto" | "always" | "auto" | Hides on its own after scrolling, or stays visible while there is something to scroll. |
| className / viewportClassName | string | — | The height (h-72, max-h-96) goes on className; viewportClassName goes on the area that scrolls. |
| viewportRef | Ref<HTMLDivElement> | — | Ref of the area that scrolls, for scrollTo and scrollIntoView. |