ScrollArea

Use cases

Constrained lists — a fixed-height container for long tag lists, menus, or log output.
Horizontal scrolling — a row of cards or thumbnails that overflows horizontally.
Custom scrollbar styling — thin, translucent scrollbars that match the design system.

When NOT to use

Full-page scroll → use the browser's native scroll. ScrollArea is for contained regions.
Virtualized lists with 1000+ items → use a virtualized list component.

Key props

ScrollArea accepts all standard Radix ScrollArea root props plus className and children.

Prop	Type	Description
`className`	`string`	Applied to the root container. Set height/width here.
`children`	`ReactNode`	Scrollable content.

Scrollbars

Both vertical and horizontal scrollbars are included automatically. They appear on hover/scroll and fade out. The track is transparent; the thumb is bg-border (thin and translucent).

Anatomy

<ScrollArea className="h-72">
  {/* content */}
</ScrollArea>

ScrollBar is also exported for custom orientations if needed.

Composition

Set a fixed h-* or max-h-* on the root — without a height constraint, ScrollArea has nothing to scroll.
Wrap a Table in ScrollArea for responsive horizontal overflow on narrow viewports.
Nest inside a Card for bounded content panels (e.g. a log viewer, a tag picker).