# Scroll Area

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

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
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}`);

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

## 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>
```

## Framework Availability
Scroll Area is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### ScrollArea
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `overflowEdgeThreshold` | `number` | No | - | Primitive override | Sets the distance from an edge that counts as overflow. |
| `viewportClass` | `string` | No | - | Wrapper prop | Adds classes to the generated viewport element. |
- Inherits div attributes.

### ScrollAreaViewport
- Inherits div attributes.

### ScrollAreaContent
- Inherits div attributes.

### ScrollBar
- Inherits div attributes.

### ScrollAreaThumb
- Inherits div attributes.

### ScrollAreaCorner
- Inherits div attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Scroll Area Primitive](/docs/primitives/scroll-area/)
- Runtime factory: [`createScrollArea`](/docs/runtime/#create-scroll-area) from `@starwind-ui/runtime/scroll-area`

## Changelog

### v2.0.0

- Rebuilt Scroll Area on Starwind Runtime with viewport, content, scrollbar, thumb, and corner anatomy.
- See the [Scroll Area Primitive](/docs/primitives/scroll-area/) for the underlying unstyled anatomy and behavior API.

### v1.0.0

- Initial Release with Starwind v2.0.0