Scroll Area
A scrollable region with custom-styled scrollbars that match the design system. Content must be explicitly sized.
Vertical
Horizontal
Installation
pnpm
pnpm dlx @hex-core/cli add scroll-areaAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | "auto" | "always" | "scroll" | "hover" | hover | When scrollbars are visible |
className | string | — | Set dimensions via Tailwind (e.g. h-72 w-48) |
AI Guidance
When to use
Use when you need styled scrollbars that match the design system — sidebars, code blocks, large lists in dialogs. Must have explicit dimensions (height/width).
When not to use
Don't use for the whole page (use native browser scrollbars). Don't use for content that should grow freely (omit the ScrollArea and use overflow-auto directly).
Common mistakes
- Forgetting to set height/width — scrollbars don't appear
- Using for the whole page
- Nesting ScrollAreas (confusing UX)
Accessibility
Radix doesn't make the viewport focusable by default — add tabIndex={0} on a focusable child or the viewport to enable keyboard scrolling (arrow keys, PgUp/PgDn, Home/End). For long lists, consider pagination or virtualization.
Token budget: 350