Scroll Area

# Scroll Area

ScrollArea,
ScrollBar,
} from "@/components/starwind/scroll-area";

```astro
---
import { ScrollArea } from "@/components/starwind/scroll-area";
import { Separator } from "@/components/starwind/separator";

const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
---

<ScrollArea class="h-72 w-48 rounded-md border">
  <div class="p-4">
    <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
    {
      tags.map((tag) => (
        <div>
          <div class="text-sm">{tag}</div>
          <Separator class="my-2" />
        </div>
      ))
    }
  </div>
</ScrollArea>
```

## Installation

```bash
npx starwind@latest add scroll-area
```

## Usage

```astro
```

```astro
<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>
```

## Composition

Use the following composition to build a `ScrollArea`:

```text
ScrollArea
└── ScrollBar
```

## Examples

### Horizontal

Use `ScrollBar` with `orientation="horizontal"` for horizontal scrolling.

```astro
---
import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";
---

<ScrollArea class="w-full max-w-xl rounded-md border" viewportClass="whitespace-nowrap">
  <div class="flex w-max gap-2 p-4">
    <span class="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#Astro</span>
    <span class="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#Tailwind</span>
    <span class="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#TypeScript</span>
  </div>
  <ScrollBar slot="scrollbar" orientation="horizontal" />
</ScrollArea>
```

### RTL

You can enable RTL behavior by placing the component inside a container with `dir="rtl"`.

```astro
---
import { ScrollArea } from "@/components/starwind/scroll-area";
import { Separator } from "@/components/starwind/separator";
---

const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);

<div class="w-full max-w-md" dir="rtl">
  <ScrollArea class="h-72 w-48 rounded-md border">
    <div class="p-4 text-right">
      <h4 class="mb-4 text-sm leading-none font-medium">العلامات</h4>
      {
        tags.map((tag) => (
          <div>
            <div class="text-sm">{tag}</div>
            <Separator class="my-2" />
          </div>
        ))
      }
    </div>
  </ScrollArea>
</div>
```

## API Reference

### ScrollArea

The root scroll container with a viewport and optional custom scrollbar slot.

| Prop | Type | Default |
|------|------|---------|
| `viewportClass` | `string` | - |
| `class` | `string` | - |

```astro
<ScrollArea class="h-72 rounded-md border p-4" viewportClass="pr-2">
  Content
</ScrollArea>
```

**Additional Notes:**
- `viewportClass`: Applies classes to the internal scrollable viewport element
- Supports standard `div` attributes such as `id`, `dir`, and `aria-*`
- Includes a default vertical `ScrollBar` through the named `scrollbar` slot

### ScrollBar

Custom scrollbar element for `ScrollArea`.

| Prop | Type | Default |
|------|------|---------|
| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` |
| `class` | `string` | - |

```astro
<ScrollArea class="w-96 rounded-md border">
  <div class="w-max p-4">Horizontal content</div>
  <ScrollBar slot="scrollbar" orientation="horizontal" />
</ScrollArea>
```

**Additional Notes:**
- Render with `slot="scrollbar"` when overriding default scrollbar behavior