Scrollbar

Glass-styled overflow chrome — opt in on any scroll region, and already applied to modal, sheet, menus, and picker panels.

Preview

Live

Scroll this pane — thumb uses semantic muted glass, track stays transparent.

Modal body, sheet body, dropdowns, popovers, filter panels, select menus, and date pickers inherit the same chrome without an extra class.

Use .scrollbar--thin in dense rails, or .scrollbar--hidden when the bar would compete with content.

Keyboard users can focus the region and scroll with arrow keys or Page Up/Down.

<div class="scrollbar" style="max-height: 12rem">
  <!-- long content -->
</div>

<div class="scrollbar scrollbar--thin" style="max-height: 12rem">…</div>
<div class="scrollbar scrollbar--hidden" style="max-height: 12rem">…</div>

Variants

Default

.scrollbar — thin Firefox bar + WebKit thumb.

Line one of overflowing copy for the default bar.

Line two keeps the region scrolling so the thumb appears.

Line three finishes the demo content block.

Line four ensures overflow on typical viewports.

Thin

.scrollbar--thin — narrower WebKit gutter for side rails.

Compact rail chrome for sticky navs and nested panes.

Same thumb tokens, smaller track width.

Prefer when space is tight beside content.

Still keyboard-scrollable when focused.

Hidden

.scrollbar--hidden — scroll without a visible bar.

Bar is gone; overflow and touch/keyboard scroll remain.

Use for horizontal chip rows or masked carousels.

Do not hide bars when scroll position is the only affordance.

Pair with fade masks if content continues off-screen.

Accessibility

  • Scrollbars are visual chrome — they do not replace a focusable scroll container when keyboard access is required.
  • Give tall scroll regions tabindex="0" (and a name via aria-label when unlabeled) so keyboard users can reach and scroll them.
  • Prefer visible bars for primary content panes; reserve .scrollbar--hidden for secondary overflow where another cue exists.
  • Thumb contrast follows theme tokens; do not force custom colors that fail against the surface.

API

HTML classes

Class Description
.scrollbar Overflow auto + themed scrollbar chrome.
.scrollbar--thin Narrower WebKit scrollbar size.
.scrollbar--hidden Hides the bar; scrolling still works.

React props

From src/core/Scrollbar.tsx — renders a <div>.

Prop Type Default Description
size 'md' | 'thin' | 'hidden' 'md' Maps to modifier classes.
className string — Merged onto the root.