scroll component

Drop-in semantic component. See examples, sizes, variants, and source.

Styled scroll container that customizes the native browser scrollbar. scroll defaults to vertical scrolling on a white track — switch to horizontal for an x-axis container, swap to subtle for a tinted look, and pick a scrollbar width with xs / sm / xl / lg. Wrap several scrolls in a scrolls parent to inherit the size and style. Programmatic scroll helpers live in scroll.js.

Size Variants

Tiny (10px scrollbar)

Tiny Scrollbar

Perfect for compact interfaces and minimal designs.

• Compact 10px scrollbar width
• Ideal for sidebars
• Minimal visual weight
• Mobile-friendly
• Best for small containers
• Less obtrusive design
• Saves screen space
• Modern aesthetic

<div class="scroll xs" style="max-height: 200px">
  <div class="content">
    <h5 class="font-semibold mb-2">Tiny Scrollbar</h5>
    <p class="text-gray-600 mb-4">Perfect for compact interfaces and minimal designs.</p>
    <ul class="stack compact text-gray-600">
      <li>• Compact 10px scrollbar width</li>
      <li>• Ideal for sidebars</li>
      <li>• Minimal visual weight</li>
      <li>• Mobile-friendly</li>
      <li>• Best for small containers</li>
      <li>• Less obtrusive design</li>
      <li>• Saves screen space</li>
      <li>• Modern aesthetic</li>
    </ul>
  </div>
</div>

Small (12px scrollbar)

Small Scrollbar

Great balance between visibility and subtlety.

• Standard 12px scrollbar width
• Good for most use cases
• Balanced visibility
• Works well on tablets
• Commonly used size
• Easy to interact with
• Not too prominent
• Versatile option

<div class="scroll sm" style="max-height: 200px">
  <div class="content">
    <h5 class="font-semibold mb-2">Small Scrollbar</h5>
    <p class="text-gray-600 mb-4">Great balance between visibility and subtlety.</p>
    <ul class="stack compact text-gray-600">
      <li>• Standard 12px scrollbar width</li>
      <li>• Good for most use cases</li>
      <li>• Balanced visibility</li>
      <li>• Works well on tablets</li>
      <li>• Commonly used size</li>
      <li>• Easy to interact with</li>
      <li>• Not too prominent</li>
      <li>• Versatile option</li>
    </ul>
  </div>
</div>

Default (16px scrollbar)

Default Scrollbar

Standard size for most applications. No class needed - this is the default!

Key Features

• Comfortable 16px scrollbar width
• Optimal for desktop interfaces
• Easy to grab and drag
• Clear visual indicator
• Accessible for all users
• WCAG compliant sizing
• Cross-browser consistent
• Recommended standard

Use Cases

Perfect for content areas, document viewers, list containers, and general-purpose scrolling.

<div class="scroll" style="max-height: 250px">
  <div class="content">
    <h5 class="font-semibold mb-2">Default Scrollbar</h5>
    <p class="text-gray-600 mb-4">
      Standard size for most applications. No class needed - this is the default!
    </p>

    <h6 class="font-semibold mt-4 mb-2">Key Features</h6>
    <ul class="stack compact text-gray-600">
      <li>• Comfortable 16px scrollbar width</li>
      <li>• Optimal for desktop interfaces</li>
      <li>• Easy to grab and drag</li>
      <li>• Clear visual indicator</li>
      <li>• Accessible for all users</li>
      <li>• WCAG compliant sizing</li>
      <li>• Cross-browser consistent</li>
      <li>• Recommended standard</li>
    </ul>

    <h6 class="font-semibold mt-4 mb-2">Use Cases</h6>
    <p class="text-gray-600">
      Perfect for content areas, document viewers, list containers, and general-purpose scrolling.
    </p>
  </div>
</div>

Large (20px scrollbar)

Large Scrollbar

More prominent scrollbar for better visibility and easier interaction.

• Prominent 20px scrollbar width
• Excellent visibility
• Very easy to target
• Great for touch interfaces
• Accessibility-focused
• Clear visual feedback
• Good for presentations
• High contrast option

<div class="scroll xl" style="max-height: 250px">
  <div class="content">
    <h5 class="font-semibold mb-2">Large Scrollbar</h5>
    <p class="text-gray-600 mb-4">
      More prominent scrollbar for better visibility and easier interaction.
    </p>
    <ul class="stack compact text-gray-600">
      <li>• Prominent 20px scrollbar width</li>
      <li>• Excellent visibility</li>
      <li>• Very easy to target</li>
      <li>• Great for touch interfaces</li>
      <li>• Accessibility-focused</li>
      <li>• Clear visual feedback</li>
      <li>• Good for presentations</li>
      <li>• High contrast option</li>
    </ul>
  </div>
</div>

Big (24px scrollbar)

Big Scrollbar

Maximum visibility and easiest interaction for accessibility.

• Extra large 24px scrollbar width
• Maximum visibility
• Easiest to interact with
• Perfect for accessibility needs
• Touch-optimized design
• High DPI screen friendly
• Kiosk mode interfaces
• Senior-friendly design

<div class="scroll lg" style="max-height: 250px">
  <div class="content">
    <h5 class="font-semibold mb-2">Big Scrollbar</h5>
    <p class="text-gray-600 mb-4">Maximum visibility and easiest interaction for accessibility.</p>
    <ul class="stack compact text-gray-600">
      <li>• Extra large 24px scrollbar width</li>
      <li>• Maximum visibility</li>
      <li>• Easiest to interact with</li>
      <li>• Perfect for accessibility needs</li>
      <li>• Touch-optimized design</li>
      <li>• High DPI screen friendly</li>
      <li>• Kiosk mode interfaces</li>
      <li>• Senior-friendly design</li>
    </ul>
  </div>
</div>

Style Variants

Default Style (White Background)

Default Style

Clean white background with light gray scrollbar. Most commonly used for content areas.

• White background (##ffffff)
• Light gray scrollbar (##ebebeb)
• Subtle hover effect
• Clean appearance
• Most common style
• Professional look
• High contrast text
• Easy to read

<div class="scroll" style="max-height: 300px">
  <div class="content">
    <h5 class="font-semibold mb-2">Default Style</h5>
    <p class="text-gray-600 mb-4">
      Clean white background with light gray scrollbar. Most commonly used for content areas.
    </p>
    <ul class="stack compact text-gray-600">
      <li>• White background (##ffffff)</li>
      <li>• Light gray scrollbar (##ebebeb)</li>
      <li>• Subtle hover effect</li>
      <li>• Clean appearance</li>
      <li>• Most common style</li>
      <li>• Professional look</li>
      <li>• High contrast text</li>
      <li>• Easy to read</li>
    </ul>
  </div>
</div>

Subtle Style (Gray Background)

Subtle Style

Soft gray background with darker scrollbar. Great for sidebars and secondary content.

• Gray background (##f7f7f7)
• Darker gray scrollbar (##d1d1d1)
• More prominent hover
• Minimalistic design
• Less distracting
• Good for sidebars
• Blends with UI
• Modern aesthetic

<div class="scroll subtle" style="max-height: 300px">
  <div class="content">
    <h5 class="font-semibold mb-2">Subtle Style</h5>
    <p class="text-gray-600 mb-4">
      Soft gray background with darker scrollbar. Great for sidebars and secondary content.
    </p>
    <ul class="stack compact text-gray-600">
      <li>• Gray background (##f7f7f7)</li>
      <li>• Darker gray scrollbar (##d1d1d1)</li>
      <li>• More prominent hover</li>
      <li>• Minimalistic design</li>
      <li>• Less distracting</li>
      <li>• Good for sidebars</li>
      <li>• Blends with UI</li>
      <li>• Modern aesthetic</li>
    </ul>
  </div>
</div>

Horizontal Scrolling

Horizontal Scroll with Cards

Card 1

Horizontal scrolling example with cards.

Card 2

Scroll horizontally to see more cards.

Card 3

Great for image galleries and carousels.

Card 4

Supports touch gestures on mobile.

Card 5

Smooth scrolling with momentum.

Card 6

Last card in this example.

<div class="scroll horizontal xl" style="width: 100%">
  <div class="content">
    <div class="inline-flex gap-4">
      <div class="flex-shrink-0 w-64 p-6 bg-blue-50 rounded-lg border border-blue-200">
        <h5 class="font-semibold text-blue-900 mb-2">Card 1</h5>
        <p class="text-blue-700">Horizontal scrolling example with cards.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-green-50 rounded-lg border border-green-200">
        <h5 class="font-semibold text-green-900 mb-2">Card 2</h5>
        <p class="text-green-700">Scroll horizontally to see more cards.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-purple-50 rounded-lg border border-purple-200">
        <h5 class="font-semibold text-purple-900 mb-2">Card 3</h5>
        <p class="text-purple-700">Great for image galleries and carousels.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-orange-50 rounded-lg border border-orange-200">
        <h5 class="font-semibold text-orange-900 mb-2">Card 4</h5>
        <p class="text-orange-700">Supports touch gestures on mobile.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-pink-50 rounded-lg border border-pink-200">
        <h5 class="font-semibold text-pink-900 mb-2">Card 5</h5>
        <p class="text-pink-700">Smooth scrolling with momentum.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-yellow-50 rounded-lg border border-yellow-200">
        <h5 class="font-semibold text-yellow-900 mb-2">Card 6</h5>
        <p class="text-yellow-700">Last card in this example.</p>
      </div>
    </div>
  </div>
</div>

<div class="scroll horizontal xl" style="width: 100%">
  <div class="content">
    <div class="inline-flex gap-4">
      <div class="flex-shrink-0 w-64 p-6 bg-blue-50 rounded-lg border border-blue-200">
        <h5 class="font-semibold text-blue-900 mb-2">Card 1</h5>
        <p class="text-blue-700">Horizontal scrolling example with cards.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-green-50 rounded-lg border border-green-200">
        <h5 class="font-semibold text-green-900 mb-2">Card 2</h5>
        <p class="text-green-700">Scroll horizontally to see more cards.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-purple-50 rounded-lg border border-purple-200">
        <h5 class="font-semibold text-purple-900 mb-2">Card 3</h5>
        <p class="text-purple-700">Great for image galleries and carousels.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-orange-50 rounded-lg border border-orange-200">
        <h5 class="font-semibold text-orange-900 mb-2">Card 4</h5>
        <p class="text-orange-700">Supports touch gestures on mobile.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-pink-50 rounded-lg border border-pink-200">
        <h5 class="font-semibold text-pink-900 mb-2">Card 5</h5>
        <p class="text-pink-700">Smooth scrolling with momentum.</p>
      </div>
      <div class="flex-shrink-0 w-64 p-6 bg-yellow-50 rounded-lg border border-yellow-200">
        <h5 class="font-semibold text-yellow-900 mb-2">Card 6</h5>
        <p class="text-yellow-700">Last card in this example.</p>
      </div>
    </div>
  </div>
</div>

Container-Level Inheritance

Using .scrolls Container

Inherited Small + Subtle

This scroll inherits small size and subtle style from the parent .scrolls container.

• No classes needed on children
• Consistent styling across group
• Easy to maintain
• DRY principle

Also Inherited

This scroll also inherits the same properties automatically.

• Same size and style
• No duplication needed
• Clean markup
• Scalable approach

<div class="scrolls sm subtle stack">
  <div class="scroll" style="max-height: 150px">
    <div class="content">
      <h5 class="font-semibold mb-2">Inherited Small + Subtle</h5>
      <p class="text-gray-600">
        This scroll inherits <strong>small</strong> size and <strong>subtle</strong> style from the
        parent <code>.scrolls</code> container.
      </p>
      <ul class="stack compact subhead text-gray-600 mt-2">
        <li>• No classes needed on children</li>
        <li>• Consistent styling across group</li>
        <li>• Easy to maintain</li>
        <li>• DRY principle</li>
      </ul>
    </div>
  </div>

  <div class="scroll" style="max-height: 150px">
    <div class="content">
      <h5 class="font-semibold mb-2">Also Inherited</h5>
      <p class="text-gray-600">This scroll also inherits the same properties automatically.</p>
      <ul class="stack compact subhead text-gray-600 mt-2">
        <li>• Same size and style</li>
        <li>• No duplication needed</li>
        <li>• Clean markup</li>
        <li>• Scalable approach</li>
      </ul>
    </div>
  </div>
</div>

<div class="scrolls sm subtle stack">
  <div class="scroll" style="max-height: 150px">
    <div class="content">
      <h5 class="font-semibold mb-2">Inherited Small + Subtle</h5>
      <p class="text-gray-600">
        This scroll inherits <strong>small</strong> size and <strong>subtle</strong> style from the
        parent <code>.scrolls</code> container.
      </p>
      <ul class="stack compact subhead text-gray-600 mt-2">
        <li>• No classes needed on children</li>
        <li>• Consistent styling across group</li>
        <li>• Easy to maintain</li>
        <li>• DRY principle</li>
      </ul>
    </div>
  </div>

<div class="scroll" style="max-height: 150px">
    <div class="content">
      <h5 class="font-semibold mb-2">Also Inherited</h5>
      <p class="text-gray-600">This scroll also inherits the same properties automatically.</p>
      <ul class="stack compact subhead text-gray-600 mt-2">
        <li>• Same size and style</li>
        <li>• No duplication needed</li>
        <li>• Clean markup</li>
        <li>• Scalable approach</li>
      </ul>
    </div>
  </div>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`scroll`	Required scrollable container	Set `max-height` (vertical) or `width` (horizontal) for scroll to engage
Base	`content`	Inner padded wrapper	Optional but recommended
Sizes (Scrollbar Width)	`xs`	10px scrollbar — tiny	Modifier on `scroll`
	`sm`	12px scrollbar — small	Modifier on `scroll`
	(default)	16px scrollbar — medium	No size class needed
	`xl`	20px scrollbar — large	Modifier on `scroll`
	`lg`	24px scrollbar — big	Modifier on `scroll`
Style	(default)	White background, light grey scrollbar	No style class needed
Style	`subtle`	Soft grey background, darker scrollbar	Modifier on `scroll`
Direction	(default)	Vertical scrolling (overflow-y)	No direction class needed
Direction	`horizontal`	Horizontal scrolling (overflow-x)	Modifier on `scroll`; pair with `inline-flex` children
Wrapper	`scrolls`	Parent container — children inherit size + style modifiers	e.g. `scrolls sm subtle`
Wrapper	`scrolls.xs\|sm\|xl\|lg` / `scrolls.subtle`	Inheritance modifiers on the parent	Children pick up scrollbar width and style