Desktop components

Scrollbars

A scrollbar shows position in scrollable content without claiming layout space of its own. Apply .p-scrollbar to any scroll container, or to <body> for the whole page.

Preview

Scroll me. The thumb is a 6px capsule with no track behind it.

It rides in a 14px gutter, so content keeps a consistent inset.

The thumb is black at 50%, and darkens to 62% on hover.

The minimum thumb length is 29px, so it never collapses to a dot.

In dark mode the thumb flips to white at 50%.

Firefox gets the thin native scrollbar in the same colors.

Horizontal works the same way: a 6px tall capsule thumb in a transparent track. Scroll sideways to see it.

Anatomy

The visible thumb is 6px thick with a full 3px capsule radius, filled rgba(0, 0, 0, 0.5), the same weight as the native overlay scroller. There is no track. The thumb sits in a 14px gutter (a 4px transparent border on each side keeps the 6px core), which also acts as the hover target. Minimum thumb length is 29px.

StateValue
Restrgba(0, 0, 0, 0.5)
Hover / dragrgba(0, 0, 0, 0.62)
Dark restrgba(255, 255, 255, 0.5)
Dark hover / dragrgba(255, 255, 255, 0.62)

Dark mode mirrors the light values in white, so the thumb reads equally well on dark and elevated dark surfaces. Both .p-dark-mode and .p-auto-dark-mode are supported.

Browser support

WebKit and Blink browsers get the full treatment through ::-webkit-scrollbar. Firefox does not expose thumb geometry, so it receives scrollbar-width: thin with scrollbar-color matching the same rest colors. Both render a quiet, trackless bar; only the exact thickness differs.

Code

<div class="p-scrollbar" style="height: 300px; overflow-y: auto;">
  <!-- long content -->
</div>

Consider keeping scrollbars visible when content overflows. Overlay bars that only appear during scrolling hide the fact that content continues, and people without trackpads rely on the thumb as a drag target.

Copied