Scroll Area A small container that scrolls inside the page (a log, a long list in a popover, a narrow panel), with a quiet 8px scrollbar and a fade at the edge where more content waits.
The snippet an agent gets usage.tsx rules.md prompt.md
import { ScrollArea } from '@basiiik/ui'; <ScrollArea>Deploy log</ScrollArea> From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it ships.
No Figma states; in code it takes focus and fades its edges only when it really scrolls. Storybook: Data display/Scroll area.
Install npm install @basiiik/ui import { ScrollArea } from '@basiiik/ui'; Props Prop Type Default orientation"vertical" | "horizontal" | "both""vertical"childrenReactNodeRequiredmaxHeightstring | number–maxWidthstring | number–aria-labelstring–
Native attributes such as className, id and data-* go to the root element.
States. No Figma states; in code it takes focus and fades its edges only when it really scrolls.
Accessibility When it scrolls it takes one Tab stop Arrow keys, Page Up, Page Down, Home and End scroll it once focused When it scrolls and has aria-label it is a named region; without aria-label it still takes focus but is not a landmark Out of the tab order while it does not scroll Use it when A log, a long list inside a popover or a card, a narrow side panel A row of chips or tabs that can overflow sideways Do not use it when The whole page (keep the page's own scrolling) A table (Table scrolls itself) Code (Code Block scrolls itself) Rules for agents Set maxHeight (or maxWidth with orientation="horizontal") Give aria-label naming the content ("Deploy log") Keep important actions outside the scrolling part Avoid Nesting scroll areas inside each other A ScrollArea around the whole page Hiding the scrollbar completely Colour tokens it reads color.bg.mutedcolor.border.subtlecolor.text.primarycolor.text.secondary
Related 