Layout
Scroll Area
Custom-styled scrollbar that matches your design system. Hides native OS scrollbars.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/scroll-area
Examples
Horizontal
Use ScrollBar with orientation='horizontal' for horizontal scrolling.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { ScrollArea } from "@codefast/ui/scroll-area";
<ScrollArea className="h-44 w-48">
…long content…
</ScrollArea>
API reference
Props for each part of the component. All native element props are also forwarded.
ScrollArea
A viewport with a styled scrollbar that replaces the native one.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Set the fixed size (e.g. h-44 w-48) the content scrolls within. |
ScrollAreaScrollbar
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | — | Render a horizontal scrollbar in addition to the vertical one. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- The viewport stays keyboard-scrollable and focusable as normal.
- Custom scrollbars are visual; native scroll behaviour is preserved underneath.
- Ensure content has enough contrast against the scroll surface.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for constrained lists, menus, and panels.
- Give the area a clear fixed size so the scrollbar makes sense.
Don’t
- Don’t wrap the whole page — let it scroll natively.
- Don’t hide that content is scrollable; show a peek of the next row.