Scroll Area

A custom-scrollbar container built on Radix Scroll Area that keeps native scrolling and keyboard behaviour while theming the track and thumb.

scroll-areascrollbaroverflowradixlayout

Open preview in new tab

How do I install the Scroll Area component?

Run the command below in a project with the shadcn CLI. It copies the component source into your repo and installs its dependencies.

npx shadcn@latest add https://www.saasuji.com/r/scroll-area.json

Dependencies

Also available as a markdown reference for AI agents: /components/scroll-area.md

Related components

Dropdown Menu

A menu of actions built on Base UI Menu with groups, labels, separators, shortcuts, checkboxes, radio items, and nested submenus.

Sheet

A panel that slides in from any edge, built on the Radix Dialog primitive with overlay, header, footer, title, description, and a corner close button.

Tabs

Accessible tabbed panels built on Radix Tabs with roving-focus keyboard navigation, horizontal or vertical orientation, and automatic or manual activation.