# ScrollArea

> A scrollable region wrapping long or overflowing content — a chat log, a table, a tall list — so it scrolls its own axis inside a bordered panel instead of pushing the surrounding page.

```ts
import { ScrollArea } from "@sdxc/ui";
```

Renders the scroll area's outer panel: a relatively positioned, rounded,
bordered `<div>` that frames whatever ScrollArea.Viewport scrolls
inside it, staying a fixed border around the scrolling content.

## Examples

```tsx
<ScrollArea>
	<ScrollArea.Viewport>
		<p>{t("changelog.body")}</p>
	</ScrollArea.Viewport>
</ScrollArea>
```

## Props

Also accepts everything in `TagProps<"div">`.


### ScrollArea.Viewport

Renders the scroll area's scrolling surface: a `<div>` filling its parent panel, clipping and scrolling along the axis named by `data-orientation` with a thin native scrollbar that gains a focus ring when focus-visible.

| Prop | Type | Description |
| --- | --- | --- |
| `orientation?` | `"vertical" \| "horizontal" \| "both"` | Axis the viewport scrolls along. Defaults to DEFAULT_ORIENTATION. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Orientation` | `"vertical" \| "horizontal" \| "both"` | Axis ScrollArea.Viewport scrolls along: only the block axis (`"vertical"`), only the inline axis (`"horizontal"`), or both at once (`"both"`). |