Foundations

Scrollbars

Global scrollbars use the active brand --primary token mixed with transparency. Tracks stay transparent so content and backgrounds show through. Change the accent in the theme customizer to preview live.

Tokens

Thumb

--scrollbar-thumb

Thumb hover

--scrollbar-thumb-hover

Track

--scrollbar-track

Size

--scrollbar-size

Usage

Native scrollbars are styled globally via src/styles/scrollbars.css. Wrap overflow regions with CustomScrollbar when you want an explicit scroll container.

import { CustomScrollbar } from "@/components/ui/custom-scrollbar"

<CustomScrollbar className="max-h-72">
  {/* long content */}
</CustomScrollbar>

Preview

CustomScrollbar

Scrollable line 1 — thumb uses --primary with a transparent track.

Scrollable line 2 — thumb uses --primary with a transparent track.

Scrollable line 3 — thumb uses --primary with a transparent track.

Scrollable line 4 — thumb uses --primary with a transparent track.

Scrollable line 5 — thumb uses --primary with a transparent track.

Scrollable line 6 — thumb uses --primary with a transparent track.

Scrollable line 7 — thumb uses --primary with a transparent track.

Scrollable line 8 — thumb uses --primary with a transparent track.

Scrollable line 9 — thumb uses --primary with a transparent track.

Scrollable line 10 — thumb uses --primary with a transparent track.

Scrollable line 11 — thumb uses --primary with a transparent track.

Scrollable line 12 — thumb uses --primary with a transparent track.

Scrollable line 13 — thumb uses --primary with a transparent track.

Scrollable line 14 — thumb uses --primary with a transparent track.

Scrollable line 15 — thumb uses --primary with a transparent track.

Scrollable line 16 — thumb uses --primary with a transparent track.

Scrollable line 17 — thumb uses --primary with a transparent track.

Scrollable line 18 — thumb uses --primary with a transparent track.

Scrollable line 19 — thumb uses --primary with a transparent track.

Scrollable line 20 — thumb uses --primary with a transparent track.

Scrollable line 21 — thumb uses --primary with a transparent track.

Scrollable line 22 — thumb uses --primary with a transparent track.

Scrollable line 23 — thumb uses --primary with a transparent track.

Scrollable line 24 — thumb uses --primary with a transparent track.

Native overflow