#Scroll Area

#Usage

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/styles/a3s.css";

<div class="scrollbar h-72 overflow-y-auto rounded-md border p-4">
  Your scrollable content here.
</div>

Use scrollbar or scrollbar-sm on an element that already scrolls with overflow-auto, overflow-y-auto, or overflow-x-auto.

The component class augments native scrolling for cross-browser styling. It does not wrap content, replace browser scroll behavior, or require JavaScript.

#Examples

These examples use Card as the framed surface so border and radius come from the active style pack.

#Horizontal

Use scrollbar with overflow-x-auto for horizontal scrolling.

#Thin

Use scrollbar-sm for compact scrollable regions like menus, listboxes, sidebars, and command results.

#RTL

Set dir="rtl" on the scrollable element or one of its ancestors to use right-to-left layout.