All componentsalwayshoverxssmmdlg
Scroll Area
Custom scroll containers with a palette-tinted scrollbar in four thicknesses.
Variants
Sizes
Install
zsh — scroll-area
1bunx stylexblocks add scroll-areaUsage — Base UI
scroll-area.tsx
123456789101112131415161718import { ScrollArea } from "#components/ui/base-ui/scroll-area.tsx";
export function Example() { return ( // variant/size resolve once on Root; overflow detection, thumb sizing, // and drag scrolling come from the machine — the hover variant reveals // the scrollbar while hovering or scrolling <ScrollArea.Root variant="always" size="md"> <ScrollArea.Viewport> <ScrollArea.Content>{/* long content */}</ScrollArea.Content> </ScrollArea.Viewport> <ScrollArea.Scrollbar orientation="vertical"> <ScrollArea.Thumb /> </ScrollArea.Scrollbar> <ScrollArea.Corner /> </ScrollArea.Root> );}