basecoat/docs/src/components/scroll-area.mdx

# Scroll Area

<Preview class="w-full max-w-42">
<div class="card h-72 p-0">
  <div class="scrollbar h-full overflow-y-auto p-4">
    <div class="space-y-4">
      <h4 class="text-sm leading-none font-medium">Tags</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>
</Preview>

## Usage

<Steps>
  <Step title="Include CSS">

Import Tailwind and one full Basecoat style bundle.

```css
@import "tailwindcss";
@import "basecoat-css/vega.css";
```

Or import only the base CSS and one style pack.

```css
@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/styles/vega.css";
```

Scroll Area uses Basecoat base scrollbar utilities and has no dedicated component CSS file.

Using CDN or bundler imports? See the [Installation page](/installation).

  </Step>
  <Step title="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`.

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

  </Step>
</Steps>

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

The utility 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.

<Preview>
<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>
</Preview>

### Thin

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

<Preview class="w-full max-w-64">
<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>
</Preview>

### RTL

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

<Preview class="w-full max-w-42">
<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>
</Preview>