PRIMITIVES

ScrollArea

Custom-styled scroll container that replaces native scrollbars with a Memphis-themed track and thumb. Composes @radix-ui/react-scroll-area; both vertical and horizontal scrollbars are wired automatically.

Import

import { ScrollArea } from 'damo-ui'

Vertical scroll

  • Row 1
  • Row 2
  • Row 3
  • Row 4
  • Row 5
  • Row 6
  • Row 7
  • Row 8
  • Row 9
  • Row 10
  • Row 11
  • Row 12
  • Row 13
  • Row 14
  • Row 15
  • Row 16
  • Row 17
  • Row 18
  • Row 19
  • Row 20
  • Row 21
  • Row 22
  • Row 23
  • Row 24
  • Row 25
  • Row 26
  • Row 27
  • Row 28
  • Row 29
  • Row 30
1<ScrollArea className="h-72 w-full border-2 border-memphis">
2  <ul className="p-4 space-y-2">
3    {Array.from({ length: 50 }, (_, i) => (
4      <li key={i}>Row {i + 1}</li>
5    ))}
6  </ul>
7</ScrollArea>

Horizontal scroll

ScrollArea wires both vertical and horizontal scrollbars; let the inner content overflow horizontally to surface the horizontal bar.

1<ScrollArea className="w-full border-2 border-memphis">
2  <div className="flex gap-3 p-4">
3    {tags.map((tag) => <Chip key={tag}>{tag}</Chip>)}
4  </div>
5</ScrollArea>

Props

ScrollArea props
PropTypeDefaultDescription
childrenReactNode—Scrollable content — wrapped in a Radix viewport that handles overflow.
classNamestring—Tailwind classes for the outer wrapper. Apply height / width here so overflow is bounded.
type'auto' | 'always' | 'scroll' | 'hover''hover'Forwarded to Radix Root. Controls when scrollbars are visible — hover reveals them on pointer hover, always keeps them in place.

When to use

  • Bounded panels with overflowing children (file lists, chat threads, tag carousels).
  • When you need consistent scrollbar styling across browsers — native bars vary heavily on Safari / Windows / Linux.
  • Skip ScrollArea for the document scroll itself — let the browser handle the page-level scroll for accessibility.
← AspectRatioSeparator →