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 component classes.

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 component class augments native scrolling for cross-browser styling. It does 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).

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