Scroll Area

Custom scrollbar styling with auto-hide, snap scrolling, direction lock, sizes, and overlay scrollbars.

Basic Scroll Area

Preview

Scrollable Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

<div class="scroll-area" style="height: 200px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
  <div class="scroll-area-viewport" style="padding: 1rem;">
    <h4 style="margin-bottom: 0.5rem; font-weight: 600;">Scrollable Content</h4>
    <p style="margin-bottom: 0.75rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="margin-bottom: 0.75rem;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p style="margin-bottom: 0.75rem;">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p style="margin-bottom: 0.75rem;">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p style="margin-bottom: 0.75rem;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-hidden h-[200px] border border-base-300 rounded-box">
  <div class="size-full overflow-auto p-4" style="scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--color-base-content) 20%, transparent) transparent;">
    <h4 class="mb-2 font-semibold">Scrollable Content</h4>
    <p class="mb-3">Lorem ipsum dolor sit amet...</p>
    <p class="mb-3">More content here...</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — native scrollbar styling via CSS

Auto-hide Scrollbar

Preview

The scrollbar is hidden by default and appears when you hover over the scroll area.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus.

Nulla facilisi. Maecenas non nisi nec tellus gravida tincidunt.

Fusce pharetra convallis urna. Quisque ut nisi.

Donec vitae sapien ut libero venenatis faucibus.

Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.

<div class="scroll-area scroll-area-auto-hide" style="height: 200px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
  <div class="scroll-area-viewport" style="padding: 1rem;">
    <p style="margin-bottom: 0.75rem;">The scrollbar is hidden by default and appears when you hover over the scroll area.</p>
    <p style="margin-bottom: 0.75rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus.</p>
    <p style="margin-bottom: 0.75rem;">Nulla facilisi. Maecenas non nisi nec tellus gravida tincidunt.</p>
    <p style="margin-bottom: 0.75rem;">Fusce pharetra convallis urna. Quisque ut nisi.</p>
    <p style="margin-bottom: 0.75rem;">Donec vitae sapien ut libero venenatis faucibus.</p>
    <p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.</p>
  </div>
  <div class="scroll-area-scrollbar scroll-area-scrollbar-vertical">
    <div class="scroll-area-thumb"></div>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-hidden h-50 border border-base-300 rounded-box group">
  <div class="size-full overflow-auto p-4" style="scrollbar-width: thin; scrollbar-color: transparent transparent;" onmouseenter="this.style.scrollbarColor='color-mix(in oklch, var(--color-base-content) 20%, transparent) transparent'" onmouseleave="this.style.scrollbarColor='transparent transparent'">
    <p class="mb-3">The scrollbar is hidden by default and appears when you hover over the scroll area.</p>
    <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus.</p>
    <p class="mb-3">Nulla facilisi. Maecenas non nisi nec tellus gravida tincidunt.</p>
    <p class="mb-3">Fusce pharetra convallis urna. Quisque ut nisi.</p>
    <p class="mb-3">Donec vitae sapien ut libero venenatis faucibus.</p>
    <p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for auto-hide — uses CSS :hover and :focus-within

Sizes

Preview

Small (6px)

Content line 1

Content line 2

Content line 3

Content line 4

Content line 5

Content line 6

Default (10px)

Content line 1

Content line 2

Content line 3

Content line 4

Content line 5

Content line 6

Large (14px)

Content line 1

Content line 2

Content line 3

Content line 4

Content line 5

Content line 6

<div class="flex gap-4">
  <!-- Small -->
  <div class="scroll-area scroll-area-sm flex-1" style="height: 150px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
    <div class="scroll-area-viewport" style="padding: 1rem;">
      <p class="text-sm font-medium mb-1">Small (6px)</p>
      <p style="margin-bottom: 0.5rem;">Content line 1</p>
      <p style="margin-bottom: 0.5rem;">Content line 2</p>
      <p style="margin-bottom: 0.5rem;">Content line 3</p>
      <p style="margin-bottom: 0.5rem;">Content line 4</p>
      <p style="margin-bottom: 0.5rem;">Content line 5</p>
      <p>Content line 6</p>
    </div>
  </div>

  <!-- Default -->
  <div class="scroll-area flex-1" style="height: 150px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
    <div class="scroll-area-viewport" style="padding: 1rem;">
      <p class="text-sm font-medium mb-1">Default (10px)</p>
      <p style="margin-bottom: 0.5rem;">Content line 1</p>
      <p style="margin-bottom: 0.5rem;">Content line 2</p>
      <p style="margin-bottom: 0.5rem;">Content line 3</p>
      <p style="margin-bottom: 0.5rem;">Content line 4</p>
      <p style="margin-bottom: 0.5rem;">Content line 5</p>
      <p>Content line 6</p>
    </div>
  </div>

  <!-- Large -->
  <div class="scroll-area scroll-area-lg flex-1" style="height: 150px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
    <div class="scroll-area-viewport" style="padding: 1rem;">
      <p class="text-sm font-medium mb-1">Large (14px)</p>
      <p style="margin-bottom: 0.5rem;">Content line 1</p>
      <p style="margin-bottom: 0.5rem;">Content line 2</p>
      <p style="margin-bottom: 0.5rem;">Content line 3</p>
      <p style="margin-bottom: 0.5rem;">Content line 4</p>
      <p style="margin-bottom: 0.5rem;">Content line 5</p>
      <p>Content line 6</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex gap-4">
  <!-- Small -->
  <div class="relative overflow-hidden flex-1 h-37.5 border border-base-300 rounded-box">
    <div class="size-full overflow-auto p-4" style="scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--color-base-content) 20%, transparent) transparent;">
      <p class="text-sm font-medium mb-1">Small (6px)</p>
      <p class="mb-2">Content line 1</p>
      <p class="mb-2">Content line 2</p>
      <p class="mb-2">Content line 3</p>
      <p class="mb-2">Content line 4</p>
      <p class="mb-2">Content line 5</p>
      <p>Content line 6</p>
    </div>
  </div>

  <!-- Default -->
  <div class="relative overflow-hidden flex-1 h-37.5 border border-base-300 rounded-box">
    <div class="size-full overflow-auto p-4" style="scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--color-base-content) 20%, transparent) transparent;">
      <p class="text-sm font-medium mb-1">Default (10px)</p>
      <p class="mb-2">Content line 1</p>
      <p class="mb-2">Content line 2</p>
      <p class="mb-2">Content line 3</p>
      <p class="mb-2">Content line 4</p>
      <p class="mb-2">Content line 5</p>
      <p>Content line 6</p>
    </div>
  </div>

  <!-- Large -->
  <div class="relative overflow-hidden flex-1 h-37.5 border border-base-300 rounded-box">
    <div class="size-full overflow-auto p-4" style="scrollbar-width: auto; scrollbar-color: color-mix(in oklch, var(--color-base-content) 20%, transparent) transparent;">
      <p class="text-sm font-medium mb-1">Large (14px)</p>
      <p class="mb-2">Content line 1</p>
      <p class="mb-2">Content line 2</p>
      <p class="mb-2">Content line 3</p>
      <p class="mb-2">Content line 4</p>
      <p class="mb-2">Content line 5</p>
      <p>Content line 6</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — sizes set via CSS classes

Horizontal Scroll

Preview

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

<div class="scroll-area scroll-area-horizontal-only" style="border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
  <div class="scroll-area-viewport" style="padding: 1rem;">
    <div class="flex gap-3" style="width: max-content;">
      <div class="shrink-0 w-48 h-32 rounded-lg bg-primary/10 flex items-center justify-center text-sm font-medium">Card 1</div>
      <div class="shrink-0 w-48 h-32 rounded-lg bg-success/10 flex items-center justify-center text-sm font-medium">Card 2</div>
      <div class="shrink-0 w-48 h-32 rounded-lg bg-warning/10 flex items-center justify-center text-sm font-medium">Card 3</div>
      <div class="shrink-0 w-48 h-32 rounded-lg bg-error/10 flex items-center justify-center text-sm font-medium">Card 4</div>
      <div class="shrink-0 w-48 h-32 rounded-lg bg-info/10 flex items-center justify-center text-sm font-medium">Card 5</div>
      <div class="shrink-0 w-48 h-32 rounded-lg bg-primary/10 flex items-center justify-center text-sm font-medium">Card 6</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-hidden border border-base-300 rounded-box">
  <div class="overflow-x-auto overflow-y-hidden p-4" style="scrollbar-width: thin;">
    <div class="flex gap-3 w-max">
      <div class="shrink-0 w-48 h-32 rounded-lg bg-primary/10 flex items-center justify-center text-sm font-medium">Card 1</div>
      <div class="shrink-0 w-48 h-32 rounded-lg bg-success/10 flex items-center justify-center text-sm font-medium">Card 2</div>
      <!-- ... more cards ... -->
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — overflow-x-auto handles horizontal scroll

Snap Scrolling

Preview

Snap 1

Snap 2

Snap 3

Snap 4

Section 1

Section 2

Section 3

Section 4

<div class="scroll-area scroll-area-snap-x scroll-area-horizontal-only" style="border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
  <div class="scroll-area-viewport" style="padding: 1rem;">
    <div class="flex gap-3" style="width: max-content;">
      <div class="shrink-0 w-64 h-40 rounded-lg bg-primary/10 flex items-center justify-center font-medium">Snap 1</div>
      <div class="shrink-0 w-64 h-40 rounded-lg bg-success/10 flex items-center justify-center font-medium">Snap 2</div>
      <div class="shrink-0 w-64 h-40 rounded-lg bg-warning/10 flex items-center justify-center font-medium">Snap 3</div>
      <div class="shrink-0 w-64 h-40 rounded-lg bg-error/10 flex items-center justify-center font-medium">Snap 4</div>
    </div>
  </div>
</div>

<!-- Vertical snap -->
<div class="scroll-area scroll-area-snap-y scroll-area-vertical-only mt-4" style="height: 200px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
  <div class="scroll-area-viewport" style="padding: 1rem;">
    <div class="h-44 rounded-lg bg-primary/10 flex items-center justify-center font-medium mb-3">Section 1</div>
    <div class="h-44 rounded-lg bg-success/10 flex items-center justify-center font-medium mb-3">Section 2</div>
    <div class="h-44 rounded-lg bg-warning/10 flex items-center justify-center font-medium mb-3">Section 3</div>
    <div class="h-44 rounded-lg bg-error/10 flex items-center justify-center font-medium">Section 4</div>
  </div>
</div>

Requires: ux.min.css

<!-- Horizontal snap -->
<div class="relative overflow-hidden border border-base-300 rounded-box">
  <div class="overflow-x-auto overflow-y-hidden p-4 snap-x snap-mandatory scroll-smooth" style="scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--color-base-content) 20%, transparent) transparent;">
    <div class="flex gap-3 w-max">
      <div class="shrink-0 w-64 h-40 rounded-lg bg-primary/10 flex items-center justify-center font-medium snap-start">Snap 1</div>
      <div class="shrink-0 w-64 h-40 rounded-lg bg-success/10 flex items-center justify-center font-medium snap-start">Snap 2</div>
      <div class="shrink-0 w-64 h-40 rounded-lg bg-warning/10 flex items-center justify-center font-medium snap-start">Snap 3</div>
      <div class="shrink-0 w-64 h-40 rounded-lg bg-error/10 flex items-center justify-center font-medium snap-start">Snap 4</div>
    </div>
  </div>
</div>

<!-- Vertical snap -->
<div class="relative overflow-hidden h-50 border border-base-300 rounded-box mt-4">
  <div class="size-full overflow-x-hidden overflow-y-auto p-4 snap-y snap-mandatory scroll-smooth" style="scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--color-base-content) 20%, transparent) transparent;">
    <div class="h-44 rounded-lg bg-primary/10 flex items-center justify-center font-medium mb-3 snap-start">Section 1</div>
    <div class="h-44 rounded-lg bg-success/10 flex items-center justify-center font-medium mb-3 snap-start">Section 2</div>
    <div class="h-44 rounded-lg bg-warning/10 flex items-center justify-center font-medium mb-3 snap-start">Section 3</div>
    <div class="h-44 rounded-lg bg-error/10 flex items-center justify-center font-medium snap-start">Section 4</div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — CSS scroll-snap handles snapping behavior

Visible Track

Preview

This scroll area shows a visible track background behind the scrollbar thumb.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

Excepteur sint occaecat cupidatat non proident.

<div class="scroll-area scroll-area-track-visible" style="height: 180px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
  <div class="scroll-area-viewport" style="padding: 1rem;">
    <p style="margin-bottom: 0.75rem;">This scroll area shows a visible track background behind the scrollbar thumb.</p>
    <p style="margin-bottom: 0.75rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p style="margin-bottom: 0.75rem;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="margin-bottom: 0.75rem;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    <p style="margin-bottom: 0.75rem;">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
  </div>
  <div class="scroll-area-scrollbar scroll-area-scrollbar-vertical">
    <div class="scroll-area-thumb"></div>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-hidden h-45 border border-base-300 rounded-box">
  <div class="size-full overflow-auto p-4" style="scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--color-base-content) 20%, transparent) var(--color-base-200);">
    <p class="mb-3">This scroll area shows a visible track background behind the scrollbar thumb.</p>
    <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="mb-3">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="mb-3">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    <p class="mb-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — track visibility via CSS class

Inset Scrollbar

Preview

The scrollbar is inset from the edges with some padding.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate.

Excepteur sint occaecat cupidatat non proident.

<div class="scroll-area scroll-area-inset" style="height: 180px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box, 1rem);">
  <div class="scroll-area-viewport" style="padding: 1rem;">
    <p style="margin-bottom: 0.75rem;">The scrollbar is inset from the edges with some padding.</p>
    <p style="margin-bottom: 0.75rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p style="margin-bottom: 0.75rem;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p style="margin-bottom: 0.75rem;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    <p style="margin-bottom: 0.75rem;">Duis aute irure dolor in reprehenderit in voluptate.</p>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
  </div>
  <div class="scroll-area-scrollbar scroll-area-scrollbar-vertical">
    <div class="scroll-area-thumb"></div>
  </div>
</div>

Requires: ux.min.css

<div class="relative overflow-hidden h-45 border border-base-300 rounded-box">
  <div class="size-full overflow-auto p-4 pr-5" style="scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--color-base-content) 20%, transparent) transparent;">
    <p class="mb-3">The scrollbar is inset from the edges with some padding.</p>
    <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="mb-3">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="mb-3">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    <p class="mb-3">Duis aute irure dolor in reprehenderit in voluptate.</p>
    <p>Excepteur sint occaecat cupidatat non proident.</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — inset positioning via CSS class

Glass Variant

Preview

Glass scrollbar on a gradient background.

The scrollbar thumb uses glass-border color for a frosted look.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore.

Ut enim ad minim veniam, quis nostrud exercitation.

Duis aute irure dolor in reprehenderit.

<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
  <div class="scroll-area glass" style="height: 180px; border-radius: var(--radius-box, 1rem); overflow: hidden;">
    <div class="scroll-area-viewport" style="padding: 1rem; color: white;">
      <p style="margin-bottom: 0.75rem;">Glass scrollbar on a gradient background.</p>
      <p style="margin-bottom: 0.75rem;">The scrollbar thumb uses glass-border color for a frosted look.</p>
      <p style="margin-bottom: 0.75rem;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p style="margin-bottom: 0.75rem;">Sed do eiusmod tempor incididunt ut labore.</p>
      <p style="margin-bottom: 0.75rem;">Ut enim ad minim veniam, quis nostrud exercitation.</p>
      <p>Duis aute irure dolor in reprehenderit.</p>
    </div>
    <div class="scroll-area-scrollbar scroll-area-scrollbar-vertical">
      <div class="scroll-area-thumb"></div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
  <div class="relative overflow-hidden glass h-45 rounded-box">
    <div class="size-full overflow-auto p-4 text-white" style="scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;">
      <p class="mb-3">Glass scrollbar on a gradient background.</p>
      <p class="mb-3">The scrollbar thumb uses glass-border color for a frosted look.</p>
      <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p class="mb-3">Sed do eiusmod tempor incididunt ut labore.</p>
      <p class="mb-3">Ut enim ad minim veniam, quis nostrud exercitation.</p>
      <p>Duis aute irure dolor in reprehenderit.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — .glass class on .scroll-area applies glass scrollbar