Scroll Area

Scroll Area bounds long content while preserving its reading order and a discoverable, native-feeling scroll path.

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

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

Or import only the base CSS and one style pack.

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

Scroll Area uses A3S UI scrollbar utility classes (.scrollbar / .scrollbar-sm).

Using CDN or bundler imports? See the Installation page.

Add your scroll area HTML

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

<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 utility classes augment native scrolling for cross-browser styling. They do not wrap content, replace browser scroll behavior, or require JavaScript. Hosts that need keyboard scrolling should keep the overflow element focusable (tabindex="0" or a native control). React/Vue ScrollArea exports remain compatibility aliases until the next major migration.

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.

Photo by Ornella Binni

Photo by Tom Byrom

Photo by Vladimir Malyavko

<div class="card w-full max-w-sm p-0">
  <div class="scrollbar overflow-x-auto">
    <div class="flex w-max gap-4 p-4">
      <figure class="shrink-0">
        <div class="aspect-[3/4] w-40 rounded-md bg-muted"></div>
        <figcaption class="text-muted-foreground pt-2 text-xs">Photo by Ornella Binni</figcaption>
      </figure>
      <figure class="shrink-0">
        <div class="aspect-[3/4] w-40 rounded-md bg-muted"></div>
        <figcaption class="text-muted-foreground pt-2 text-xs">Photo by Tom Byrom</figcaption>
      </figure>
      <figure class="shrink-0">
        <div class="aspect-[3/4] w-40 rounded-md bg-muted"></div>
        <figcaption class="text-muted-foreground pt-2 text-xs">Photo by Vladimir Malyavko</figcaption>
      </figure>
    </div>
  </div>
</div>

Thin

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

Recent files

<div class="card w-full max-w-sm p-1">
  <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">Recent files</div>
  <div class="scrollbar-sm max-h-48 overflow-y-auto">
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>project-roadmap.md</span>
      <span class="text-xs text-muted-foreground">2m</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>release-notes.md</span>
      <span class="text-xs text-muted-foreground">8m</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>api-contract.json</span>
      <span class="text-xs text-muted-foreground">16m</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>pricing-table.html</span>
      <span class="text-xs text-muted-foreground">1h</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>onboarding-flow.md</span>
      <span class="text-xs text-muted-foreground">2h</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>settings-panel.ts</span>
      <span class="text-xs text-muted-foreground">3h</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>invoice-template.html</span>
      <span class="text-xs text-muted-foreground">5h</span>
    </button>
  </div>
</div>

RTL

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

العلامات

v1.2.0-beta.50

v1.2.0-beta.49

v1.2.0-beta.48

v1.2.0-beta.47

v1.2.0-beta.46

v1.2.0-beta.45

v1.2.0-beta.44

v1.2.0-beta.43

v1.2.0-beta.42

v1.2.0-beta.41

v1.2.0-beta.40

v1.2.0-beta.39

v1.2.0-beta.38

<div class="card h-72 p-0">
  <div dir="rtl" class="scrollbar h-full overflow-y-auto p-4">
    <div class="space-y-4">
      <h4 class="text-sm leading-none font-medium">العلامات</h4>
      <div class="text-sm">
        <div class="border-b py-2">v1.2.0-beta.50</div>
        <div class="border-b py-2">v1.2.0-beta.49</div>
        <div class="border-b py-2">v1.2.0-beta.48</div>
        <div class="border-b py-2">v1.2.0-beta.47</div>
        <div class="border-b py-2">v1.2.0-beta.46</div>
        <div class="border-b py-2">v1.2.0-beta.45</div>
        <div class="border-b py-2">v1.2.0-beta.44</div>
        <div class="border-b py-2">v1.2.0-beta.43</div>
        <div class="border-b py-2">v1.2.0-beta.42</div>
        <div class="border-b py-2">v1.2.0-beta.41</div>
        <div class="border-b py-2">v1.2.0-beta.40</div>
        <div class="border-b py-2">v1.2.0-beta.39</div>
        <div class="py-2">v1.2.0-beta.38</div>
      </div>
    </div>
  </div>
</div>

#Scroll Area

Tags

#Usage

Include CSS

Add your scroll area HTML

#Examples

#Horizontal

#Thin

#RTL

العلامات

Scroll Area

Usage

Examples

Horizontal

Thin

RTL