Skip to content
ssntl/ui
ES

Scrollbar

Rounded, concentric scrollbars from the tokens for native scroll containers, plus scrollbar-none.

Paragraph 1. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 2. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 3. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 4. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 5. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 6. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 7. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 8. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 9. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 10. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 11. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 12. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Installation

Add it with the shadcn CLI, or copy the source by hand.

$ pnpm dlx shadcn@latest add @ssntl/scrollbar

Rules

What this component expects from you, as it ships in styles/ssntl/scrollbar.md next to the code. The full file adds when to use it, keyboard, the UI foundations it applies and every shared rule.

styles/ssntl/scrollbar.md
## Rules for Scrollbar

- Rounded and concentric in Chrome, Edge and Safari: an 8px track and a 6px thumb, both pills, with rounded ends.
- Firefox can't round a native scrollbar: it gets a thin bar in the same colors. For an identical bar everywhere, use `ScrollArea`.
- Apply it to html for the page; it also styles every scroll container inside.
- `scrollbar-none` hides the bar but keeps scrolling; only use it where something else shows that the content scrolls.
Open the full rules file (opens in a new tab)