Components

Scroll area

Radix wrapper with custom native-like scrollbars that match the DS (thin, rounded, muted). Use for constrained scrollable regions inside cards, sheets, or menus.

Updated Jul 10, 2026 by Leonardo Posada

Variants

Rule r-001
Rule r-002
Rule r-003
Rule r-004
Rule r-005
Rule r-006
Rule r-007
Rule r-008
Rule r-009
Rule r-010
Rule r-011
Rule r-012
Rule r-013
Rule r-014
Rule r-015
Rule r-016
Rule r-017
Rule r-018
Rule r-019
Rule r-020
<ScrollArea className="h-40 w-64 rounded-md border p-4">
  {items.map((item) => (
    <div key={item} className="py-1 text-sm">{item}</div>
  ))}
</ScrollArea>

When to use

  • Long lists inside a Sheet or Popover.
  • Table wrappers that need horizontal scroll on narrow viewports.

When not to use

  • Page-level scroll — the browser handles that.
  • For a single overflow-x — a plain overflow-x-auto is enough.

Usage

Do
  • Set a max height on the wrapper so the scrollbar actually appears.
Don't
  • Don't rely on ScrollArea for accessibility of long content — provide a way to see all rows.