ScrollArea
Constrained-height surface with a themed Radix scrollbar that only appears on hover.
Use ScrollArea inside cards / popovers / kanban columns where content must scroll without polluting the page with a native scrollbar. For full-page content keep the native scrollbar.
Install
Pull from the workspace packages (already available if you ran pnpm add):
Examples
30-row hover-only scrollbar
Row #1 — hover to reveal the scrollbar.
Row #2 — hover to reveal the scrollbar.
Row #3 — hover to reveal the scrollbar.
Row #4 — hover to reveal the scrollbar.
Row #5 — hover to reveal the scrollbar.
Row #6 — hover to reveal the scrollbar.
Row #7 — hover to reveal the scrollbar.
Row #8 — hover to reveal the scrollbar.
Row #9 — hover to reveal the scrollbar.
Row #10 — hover to reveal the scrollbar.
Row #11 — hover to reveal the scrollbar.
Row #12 — hover to reveal the scrollbar.
Row #13 — hover to reveal the scrollbar.
Row #14 — hover to reveal the scrollbar.
Row #15 — hover to reveal the scrollbar.
Row #16 — hover to reveal the scrollbar.
Row #17 — hover to reveal the scrollbar.
Row #18 — hover to reveal the scrollbar.
Row #19 — hover to reveal the scrollbar.
Row #20 — hover to reveal the scrollbar.
Row #21 — hover to reveal the scrollbar.
Row #22 — hover to reveal the scrollbar.
Row #23 — hover to reveal the scrollbar.
Row #24 — hover to reveal the scrollbar.
Row #25 — hover to reveal the scrollbar.
Row #26 — hover to reveal the scrollbar.
Row #27 — hover to reveal the scrollbar.
Row #28 — hover to reveal the scrollbar.
Row #29 — hover to reveal the scrollbar.
Row #30 — hover to reveal the scrollbar.
Guidelines
✓
Match the ScrollArea height to a sensible row count.Showing 10 rows of 12 px is too dense; aim for ~5–8 rows.
✕
Wrap whole pages in ScrollArea.Replaces native scroll gestures and loses momentum on touch devices.