Scroll area
Native scrolling with a slim overlay scrollbar and soft fades at edges that have more content.
Installation
npx shadcn@latest add @quireui/scroll-areaUsage
<ScrollArea className="h-64" contentClassName="p-1">
{items}
</ScrollArea>className goes on the outer frame (give it a height or max-height), contentClassName on the wrapper around your children (padding, spacing) and viewportClassName on the scrolling element itself.
Horizontal
orientation: vertical (default), horizontal or both.
Behaviour
- Native scrolling. Wheel, trackpad momentum, touch and the keyboard all work as usual. Nothing is reimplemented in JavaScript.
- No layout shift. The scrollbar overlays the content and only shows while hovering or scrolling, then lingers briefly so it does not flicker.
- Edge fades show there is more. Each fade grows with the hidden amount, up to 24px, so an edge you have nearly reached fades only slightly. Turn them off with
fade={false}. - Keyboard. A scroll area that overflows can be focused and scrolled with the arrow keys, Page Up/Down and Space.
Accessibility
It is the browser's own scrolling, so screen readers move through the content as usual.
When the content overflows, the scroll area can be focused with Tab and scrolled with the arrow keys, Page Up/Down, Home/End and Space. This is the browser's own scrolling; nothing is added on top.
Dialog and Sheet bodies use it, so long dialogs scroll the same way. Built on Base UI Scroll Area.
API reference
ScrollArea
Native scrolling (wheel, touch, keyboard, momentum) with a slim overlay scrollbar that shows while hovering or scrolling, and soft fades at edges that have more content.
Prop
Type
Also takes every prop of Base UI's ScrollArea.Root. Style it with [data-slot="scroll-area"].