# Scroll Area

A container with custom scrollbars for overflow content.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { ScrollArea } from "coss-svelte";

const tags = Array.from({ length: 50 }, (_, index) => `v1.0.0-alpha.${index}`);
</script>

<ScrollArea class="h-64 w-64 rounded-lg border">
	<div class="px-4 py-2">
		<h4 class="mb-2 font-medium text-sm">Tags</h4>
		<div class="flex flex-col gap-1">
			{#each tags as tag}
				<div class="text-sm">{tag}</div>
			{/each}
		</div>
	</div>
</ScrollArea>

```

## Anatomy

- `ScrollArea`
- `ScrollAreaCorner`
- `ScrollAreaScrollbar`
- `ScrollAreaThumb`
- `ScrollAreaViewport`

## API Reference

### ScrollArea

A container with custom scrollbars for overflow content.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI ScrollArea.Root](https://bits-ui.com/docs/components/scroll-area#root).

### ScrollAreaCorner

Renders the corner where horizontal and vertical scrollbars meet.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI ScrollArea.Corner](https://bits-ui.com/docs/components/scroll-area#corner).

### ScrollAreaScrollbar

Renders a scrollbar for the scroll area.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `Orientation` | `"vertical"` | Layout direction for the component. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI ScrollArea.Scrollbar](https://bits-ui.com/docs/components/scroll-area#scrollbar).

### ScrollAreaThumb

Renders the draggable or moving indicator.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI ScrollArea.Thumb](https://bits-ui.com/docs/components/scroll-area#thumb).

### ScrollAreaViewport

Wraps the scrollable viewport for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI ScrollArea.Viewport](https://bits-ui.com/docs/components/scroll-area#viewport).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Layout & Navigation |
| Particles | 5 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/scroll-area.json` for the complete local file and dependency closure.
- Scroll Area is stable in the current source catalog.