Tailwind UI Pattern Registry for humans and agents

scrollbar scroll overflow custom webkit style scrollbar to match design system subtle scrollbar for sidebars or code blocks consistent scrollbar appearance across browsers default browser scrollbar clashes with design need thin scrollbar without hiding it completely scrollbar looks different across browsers

Custom Scrollbar

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/scrollbar.json
Format
Preview
Stage Background
Customize

Quick Start

<div class="custom-scrollbar overflow-y-auto max-h-64">Scrollable content</div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-color-scheme
Size
875 bytes · 34 lines
Custom Properties
--scrollbar-width--scrollbar-track--scrollbar-thumb--scrollbar-thumb-hover
Classes
.custom-scrollbar
scrollbar scroll overflow custom webkit

Apply .custom-scrollbar to any scrollable container. Uses the modern scrollbar-color property with -webkit-scrollbar fallback for full cross-browser support.

Customize via CSS custom properties:

  • --scrollbar-width — scrollbar thickness (default: 0.5rem)
  • --scrollbar-track — track background color
  • --scrollbar-thumb — thumb color
  • --scrollbar-thumb-hover — thumb hover color

Dark mode colors are applied automatically via prefers-color-scheme.