Scrollbars

Default scrollbars are loud and ignore your theme. Bones ships an opt-in stylesheet that makes every scrollbar thin, theme-aware, and invisible until you hover whatever is scrolling. For one scrolling pane rather than the whole page, use the Scroll area component.

Opt in

One import, applied page-wide. It's separate from index.css on purpose: restyling every scrollbar is a whole-page opinion your app should choose deliberately.

import "@usebones/tokens/scrollbars.css";

See it

This box scrolls; this site has the stylesheet enabled. The scrollbar fades in when your cursor is over the box and hides again when it leaves, picking up --ub-border-strong so it follows the theme. The gutter stays reserved, so content never shifts.

How it works

Just the standard CSS scrollbar properties, colored by tokens. No JavaScript, no wrapper component, nothing to keep in sync:

* {
  scrollbar-width: thin;
  /* the visible color at zero alpha, so a fade moves opacity only */
  scrollbar-color: oklch(from var(--ub-border-strong) l c h / 0) transparent;
}

*:hover {
  scrollbar-color: var(--ub-border-strong) transparent;
}

Fading the reveal

The stylesheet deliberately ships no transition: transitions on broad selectors animate things that were never meant to move and make components that wait for transitions linger. To fade the reveal, declare it on the scrollables you own:

.my-scroll-area {
  transition: scrollbar-color var(--ub-duration-base) var(--ub-ease-out);
}