# 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>
  <div slot="vue">
```vue
<script setup lang="ts">
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}`);
</script>

<template>
  <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>
      <template v-for="tag in tags" :key="tag">
        <div>
          <div class="text-sm">{{ tag }}</div>
          <Separator class="my-2" />
        </div>
      </template>
    </div>
  </ScrollArea>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add scroll-area --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add scroll-area --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add scroll-area --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<FrameworkCodeSwitcher>
<div slot="astro">
```astro
---
import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";
---
```
</div>
<div slot="react">
```tsx
import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";
</script>

<template></template>
```
</div>
</FrameworkCodeSwitcher>

<FrameworkCodeSwitcher>
<div slot="astro">
```astro
<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>
```
</div>
<div slot="react">
```tsx
import { ScrollArea } from "@/components/starwind/scroll-area";

export function Example() {
  return (
    <>
      <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
        Your scrollable content here.
      </ScrollArea>
    </>
  );
}
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import { ScrollArea } from "@/components/starwind/scroll-area";
</script>

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

## Composition

`ScrollArea` provides the viewport, content wrapper, vertical scrollbar, thumb, and corner. The
rendered structure is:

```text
ScrollArea
├── ScrollAreaViewport
│   └── ScrollAreaContent
├── ScrollBar
│   └── ScrollAreaThumb
└── ScrollAreaCorner
```

Pass a custom scrollbar through the framework-specific API:

<FrameworkCodeSwitcher>
<div slot="astro">
```astro
---
import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";
---

<ScrollArea>
  Scrollable content
  <ScrollBar slot="scrollbar" orientation="horizontal" />
</ScrollArea>
```
</div>
<div slot="react">
```tsx
import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";

export function Example() {
  return (
    <ScrollArea scrollbar={<ScrollBar orientation="horizontal" />}>
      Scrollable content
    </ScrollArea>
  );
}
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";
</script>

<template>
  <ScrollArea>
    Scrollable content
    <template #scrollbar><ScrollBar orientation="horizontal" /></template>
  </ScrollArea>
</template>
```
</div>
</FrameworkCodeSwitcher>

## Examples

## Horizontal

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

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
        import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";

        export function Example() {
          return (
            <>
              <ScrollArea
  className="w-full max-w-xl rounded-md border"
  viewportClassName="whitespace-nowrap"
  scrollbar={<ScrollBar orientation="horizontal" />}
>
                <div className="flex w-max gap-2 p-4">
                  <span className="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#Astro</span>
                  <span className="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#Tailwind</span>
                  <span className="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm">#TypeScript</span>
                </div>
              </ScrollArea>
            </>
          );
        }
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ScrollArea, ScrollBar } from "@/components/starwind/scroll-area";
</script>

<template>
  <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>
    <template #scrollbar><ScrollBar orientation="horizontal" /></template>
  </ScrollArea>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## RTL

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

<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}`);

<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>
```
  </div>
  <div slot="react">
```tsx
import { ScrollArea } from "@/components/starwind/scroll-area";
import { Separator } from "@/components/starwind/separator";

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

export function Example() {
  return (
    <div className="w-full max-w-md" dir="rtl">
      <ScrollArea className="h-72 w-48 rounded-md border">
        <div className="p-4 text-right">
          <h4 className="mb-4 text-sm leading-none font-medium">العلامات</h4>
          {tags.map((tag) => (
            <div key={tag}>
              <div className="text-sm">{tag}</div>
              <Separator className="my-2" />
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
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}`);
</script>

<template>
  <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>
        <template v-for="tag in tags" :key="tag">
          <div>
            <div class="text-sm">{{ tag }}</div>
            <Separator class="my-2" />
          </div>
        </template>
      </div>
    </ScrollArea>
  </div>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## 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.1

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

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