Build · New
Scroll Area
A fixed box with a slim scrollbar, for lists and card rows that must stay inside a set height or width.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
Installation
SoonInstalling from the registry opens at launch. Until then the command below is what it will be.
npx shadcn@latest add @ritla/scroll-areaDependencies it brings: @base-ui/react
Usage
import { ScrollArea } from "@/components/ui/scroll-area";<ScrollArea label="Currencies" className="h-320 w-256" contentClassName="px-20 py-16">
…
</ScrollArea>Examples
A row of cards
orientation="horizontal". The box is narrower than the row so the last card peeks out, and people know there is more. In Arabic the row starts from the right.
Inside a card
bare drops the frame inside a card that has one. The card's heading is pinned above, and only the list scrolls.
API reference
ScrollArea
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "vertical" | "horizontal" | "both" | "vertical" | Figma's Orientation. |
label | string | The area's name for screen readers (it becomes a region). | |
bare | boolean | false | No frame, inside a panel or card. |
className | string | For the frame: a fixed height (vertical) or width (horizontal). | |
contentClassName | string | For the scrolling content: padding and layout. |
Accessibility
Keyboard
Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.
| Key | Action |
|---|---|
| Tab | To the area when it scrolls, or to the first control inside. |
| ArrowUpArrowDownPageUpPageDown | Scroll vertically. |
| ArrowLeftArrowRight | Scroll horizontally. |
ARIA
- Scrolling is native, so keyboard, wheel, touch and screen readers work as on any scrolling element.
- The bar is decorative; with
labelthe area is a namedregion. - Don't wrap whole pages: it's for panels, menus, tables and side lists.
Arabic and RTL notes
Mirrors
- The vertical bar sits on the left.
- Horizontal rows start from the right, and so does the thumb.
Does not mirror
- Currency codes stay left to right.
- Numerals
- Numbers in the content follow the numerals setting.
- Arabic typography
- The area sets no type; the content brings its own styles.
- Mixed-direction text
- Codes inside Arabic rows go in
<bdi dir="ltr">.