# Scroll Area

A scrolling region with a slim scrollbar that shows while it's in use.

> Every page: https://constella.aayush.cv/llms.txt

```tsx
<ScrollArea sx={styles.tags}>
  <div>
    {tags.map((tag) => (
      <div key={tag}>{tag}</div>
    ))}
  </div>
</ScrollArea>
```

## Installation

```bash
npx shadcn@latest add @constella/scroll-area
```

## Usage

```tsx
import { ScrollArea } from "@/components/primitives/scroll-area";
```

Give it a height with `sx`; its content scrolls inside.

```tsx
<ScrollArea sx={styles.box}>{content}</ScrollArea>
```

## Composition

```
ScrollArea
└── ScrollBar
```

## Scroll Bar

`ScrollArea` brings a vertical scrollbar. Add a `ScrollBar` with `orientation="horizontal"` for content that scrolls sideways.

```tsx
<ScrollArea sx={styles.gallery}>
  <div {...stylex.props(styles.row)}>{tiles}</div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>
```

Add both for content wider and taller than the area, like a wide table. The corner between them stays clear.

```tsx
<ScrollArea sx={styles.sheet}>
  <table>…</table>
  <ScrollBar orientation="horizontal" />
</ScrollArea>
```

## Scroll Fade

Pass [Scroll Fade](https://constella.aayush.cv/docs/components/scroll-fade/index.md) to `viewportSx` to fade the edges with more content past them.

```tsx
<ScrollArea viewportSx={scrollFade.y}>{children}</ScrollArea>
```

Pass `hideScrollbar` to drop the vertical scrollbar when the fade already shows there's more, like the docs sidebar.

```tsx
<ScrollArea hideScrollbar sx={styles.list} viewportSx={scrollFade.y}>
  {items}
</ScrollArea>
```

## API Reference

| Part | Adds |
| --- | --- |
| `ScrollArea` | Renders the viewport, a vertical `ScrollBar` unless `hideScrollbar`, and the corner; `viewportRef` and `viewportSx` reach the element that scrolls, for a virtualizer, a data table's `scrollRef` or a [Scroll Fade](https://constella.aayush.cv/docs/components/scroll-fade/index.md) |
| `ScrollBar` | Shows while the area is hovered or scrolling |

Every part takes `sx`, applied last. For the rest, see [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area).