Scroll Area

ScrollArea wraps a bounded region - a changelog panel, a code block, a list inside a card - in the site's thin scrollbar, and hands the wheel back to the page's smooth scroller the moment the cursor leaves it. Reach for it whenever a piece of content needs its own scroll, not the page's.

Why it is built this way

Two behaviours were being forgotten separately often enough to earn one name: the site's thin scrollbar styling, and data-lenis-prevent, which tells the smooth scroller to leave this subtree's wheel and touch events alone. Skip either one and the region either looks like an unstyled native scrollbar or fights the page for the same gesture.

Install

tanstack add https://adamjurek.com/r/tanstack/scroll-area.json

pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/scroll-area.json

pnpm add @sushindustries/ui @sushindustries/atoms

What you get