Skip to content
Theme
Accent
Voice
SkillCase StudiesComponentsExamplesThemingBest PracticesPhilosophyGitHub ↗

This whole registry and philosophy is available as a Claude Code Agent Skill — install it and Claude builds UI with it directly.

Install the Skill →
Components · Scroll Area

Scroll Area

$ npx @dhruvchoudhary/dsgn add scroll-area

Custom-styled scrollbars for a fixed-height panel, built on Radix Scroll Area.

Notification 1 — a scrollable panel with a custom-styled scrollbar.

Notification 2 — a scrollable panel with a custom-styled scrollbar.

Notification 3 — a scrollable panel with a custom-styled scrollbar.

Notification 4 — a scrollable panel with a custom-styled scrollbar.

Notification 5 — a scrollable panel with a custom-styled scrollbar.

Notification 6 — a scrollable panel with a custom-styled scrollbar.

Notification 7 — a scrollable panel with a custom-styled scrollbar.

Notification 8 — a scrollable panel with a custom-styled scrollbar.

Notification 9 — a scrollable panel with a custom-styled scrollbar.

Notification 10 — a scrollable panel with a custom-styled scrollbar.

Notification 11 — a scrollable panel with a custom-styled scrollbar.

Notification 12 — a scrollable panel with a custom-styled scrollbar.

Accent
Voice
Corner radius

This is applied to the whole site live, not just this panel. Export it as CSS →