All componentsalwayshoverxssmmdlg
Scroll Area
Custom scroll containers with a palette-tinted scrollbar in four thicknesses.
Deploy preview ready
Ana joined the team
Billing plan upgraded
New API key created
Domain verified
Webhook delivered
Backup completed
Invite sent to Sam
Variants
Deploy preview ready
Ana joined the team
Billing plan upgraded
New API key created
Domain verified
Webhook delivered
Backup completed
Invite sent to Sam
Deploy preview ready
Ana joined the team
Billing plan upgraded
New API key created
Domain verified
Webhook delivered
Backup completed
Invite sent to Sam
Sizes
Deploy preview ready
Ana joined the team
Billing plan upgraded
New API key created
Domain verified
Webhook delivered
Backup completed
Invite sent to Sam
Deploy preview ready
Ana joined the team
Billing plan upgraded
New API key created
Domain verified
Webhook delivered
Backup completed
Invite sent to Sam
Deploy preview ready
Ana joined the team
Billing plan upgraded
New API key created
Domain verified
Webhook delivered
Backup completed
Invite sent to Sam
Deploy preview ready
Ana joined the team
Billing plan upgraded
New API key created
Domain verified
Webhook delivered
Backup completed
Invite sent to Sam
Install
zsh — scroll-area
1bunx stylexblocks add scroll-areaUsage — Ark UI
scroll-area.tsx
123456789101112131415161718import { ScrollArea } from "#components/ui/ark-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> );}