Skip to content
ssntl/ui
ES

Scroll area

A scroll container with the same rounded scrollbar in every browser, Firefox included, and native scrolling.

  • GT-48210Q 1265.50
  • GT-48209Q 1228.25
  • GT-48208Q 1191.00
  • GT-48207Q 1153.75
  • GT-48206Q 1116.50
  • GT-48205Q 1079.25
  • GT-48204Q 1042.00
  • GT-48203Q 1004.75
  • GT-48202Q 967.50
  • GT-48201Q 930.25
  • GT-48200Q 893.00
  • GT-48199Q 855.75
  • GT-48198Q 818.50
  • GT-48197Q 781.25
  • GT-48196Q 744.00
  • GT-48195Q 706.75
  • GT-48194Q 669.50
  • GT-48193Q 632.25
  • GT-48192Q 595.00
  • GT-48191Q 557.75
  • GT-48190Q 520.50
  • GT-48189Q 483.25
  • GT-48188Q 446.00
  • GT-48187Q 408.75

Installation

Add it with the shadcn CLI, or copy the source by hand.

$ pnpm dlx shadcn@latest add @ssntl/scroll-area

API reference

ScrollArea

  • aria-label?Type: stringNames the scrolling region for keyboard and screen reader users.Default:—
  • type?Type: —Default:"hover"

Also takes every prop of Radix ScrollArea.Root.

ScrollBar

  • orientation?Type: —Default:"vertical"

Also takes every prop of Radix ScrollArea.Scrollbar.

Rules

What this component expects from you, as it ships in components/ui/scroll-area.md next to the code. The full file adds when to use it, keyboard, the UI foundations it applies and every shared rule.

components/ui/scroll-area.md
## Rules for Scroll area

- The same scrollbar everywhere, Firefox included: an 8px pill track with a 6px pill thumb nested 1px inside, so the curves are concentric.
- Scrolling stays native (wheel, touch, keyboard, find in page); only the bar is drawn.
- The viewport takes focus with a visible ring; give it an `aria-label` so the region has a name.
- `type="hover"` shows the bar while hovering or scrolling; use "always" when people must see there is more.
- Thumb on track is `--input` on `--muted`, 3:1 or more in both themes, checked in lint.
Open the full rules file (opens in a new tab)