Scroll Area
A scrolling region with a styled scrollbar that matches the platform's behaviour.
When to use
- A region with a fixed height and longer content: an audit log, a long list in a panel.
When not to use
- The whole page scrolls: let the browser do it.
- A table wider than its container: use Table, which scrolls sideways on its own.
Install
npx shadcn@latest add @clinia/scroll-areaAnatomy
- 1Viewport
data-slot="scroll-area-viewport"tabIndex 0 · focus ring - 2Thumb
data-slot="scroll-area-thumb"bg-border · rounded-full
Clinia rules
- Give the root a fixed height, such as
h-56. Without one it grows with its content and never scrolls. - Use it for one region inside the page. Don't nest scroll areas.
Do and don't
States
default
focus
Focus cells apply the component's focus-visible classes statically. Toggle the site theme to review both themes.
Accessibility
Built in
- The viewport is focusable, so keyboard users can scroll it with the arrow keys and Page Up and Page Down.
Your responsibility
- Name the region: set
role="region"and anaria-labelsuch asAudit logon theScrollArea. - Don't put content users must act on deep inside a small scrolling region.
How to test
- Press Tab until the scroll area has focus: a ring appears around it.
- Press Arrow Down and Page Down: the content scrolls.
- Zoom to 200%: the content still scrolls and nothing is cut off.
API
Every prop comes from Base UI Scroll Area.