# Scroll area

A themed, thin-scrollbar scroll container for any overflowing region.

<p class="kai-tag-sub">kai-scroll-area</p>

A themed, thin-scrollbar scroll container for any overflowing region. Give it a bounded height, put the content in the default slot, and it scrolls inside — with a cross-browser scrollbar that follows your theme.

## Preview

> **tip:** 
Wrap any region that overflows its space — a long message thread, a settings panel, a changelog, a list of search results — when you want a thin, consistent scrollbar instead of the browser's default. For a full chat transcript that auto-sticks to the latest message, reach for [Conversations](/components/conversations/) instead.

## Usage

Put the scrollable content as light-DOM children — it lands in the default slot — and give the element a bounded height in your own layout. Once the content is taller than that height, it scrolls inside, and the thin scrollbar follows the `--color-scrollbar-thumb` token. Restyle the inner padding or max-height from outside via `::part(viewport)`; the behavior stays in the component.

```html
<kai-scroll-area style="height: 16rem">
  <p>…long content that overflows the height…</p>
  <p>…more content…</p>
</kai-scroll-area>
```

## Examples

### Vertical (default)

`orientation="vertical"` — a bounded box with a tall column; the content scrolls down and the thin scrollbar appears.

### Horizontal

`orientation="horizontal"` — a wide row (chips, a gallery) that scrolls sideways. The vertical axis is clamped.

### Both axes

`orientation="both"` — content larger than the box on both axes scrolls in two directions.

## Styling

Restyle the scrolling container through its part — add padding, cap the height, or tune the scrollbar via the `--color-scrollbar-thumb` token from outside the element.

## Props

## Composed from