Scroll area · Bones

A scroll container with the same overlay scrollbars in every browser, wrapping the Base UI Scroll Area. One component: the viewport, both bars, thumbs, and corner render automatically, and the bars reveal on hover or while scrolling, like the site scrollbars.

Playground

Scroll inside the box (or focus it and use the arrow keys). The Code tab always shows the markup for exactly what you've configured.

1.4.2 Menu indicators keep their slot so toggling never resizes.

1.4.1 Dialog backdrops pick up a slight blur.

1.4.0 Overlays share one z-index token and layer above app chrome.

1.3.2 Select popups match the trigger width on every screen.

1.3.1 Sliders no longer animate thumb position while dragging.

1.3.0 Accordion triggers render inside real headings.

Variants

A bar appears only on an axis that overflows: release notes that wrap get the vertical bar alone, while a deploy log with long lines gets both, and the corner between them renders automatically.

1.4.2 Menu indicators keep their slot so toggling never resizes.

1.4.1 Dialog backdrops pick up a slight blur.

1.4.0 Overlays share one z-index token and layer above app chrome.

1.3.2 Select popups match the trigger width on every screen.

1.3.1 Sliders no longer animate thumb position while dragging.

1.3.0 Accordion triggers render inside real headings.

12:01:14 build   pulling base image node:22-slim (cached)
12:01:15 build   pnpm install --frozen-lockfile completed in 8.2s
12:01:24 build   turbo build: packages/tokens, packages/react, apps/www
12:01:58 build   static build finished: 24 routes, 0 warnings
12:02:03 deploy  uploading 214 assets to the edge network
12:02:19 deploy  promoting deployment to production
12:02:20 deploy  aliasing usebones.com and www.usebones.com
12:02:21 ready   deployment live in 67s

Styling states

Scrollbars carry data-orientation, plus data-hovering and data-scrolling while active; that pair drives the reveal, so custom styling never needs JavaScript:

.ub-scroll-area-thumb {
  background: oklch(from var(--ub-accent) l c h / 0.5);
}

Props

Everything a div accepts passes through, so size it like any box with height, max-height, or width; the one prop worth naming:

Prop	Type	Default	Description
`aria-label`	`string`	–	Names the scrollable region for screen readers.

Agent instructions

Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.

ScrollArea, from @usebones/react.
- One component; wrap the content and size the ScrollArea like a box (height/max-height/width). Both scrollbars are wired automatically and each shows only when its axis overflows.
- Bars reveal on hover and while scrolling; the viewport is focusable so keyboard scrolling works. Add aria-label to name the region.
- Use it for panes inside the app (lists, code, chat logs), not the page itself; the page keeps native scrolling with the tokens scrollbar styles.
- Restyle in CSS via .ub-scroll-area-scrollbar, .ub-scroll-area-thumb, [data-orientation], [data-hovering], [data-scrolling]. Tokens only.