# Scroll Area

## Overview

A cross-browser, themeable scrollable container with custom scrollbar styling. Use instead of native `overflow-y-auto` when the scrollbar needs to match the application's design system (instead of the OS default scrollbar).

---

## When to Use

- Fixed-height panels that need vertical scrolling
- Sidebar content areas, chat message lists, log viewers
- Any scrollable container where the native scrollbar looks out of place

---

## Props

| Prop        | Type                                        | Default   | Description                           |
| ----------- | ------------------------------------------- | --------- | ------------------------------------- |
| `className` | `string`                                    | —         | Set height and width of the container |
| `type`      | `'auto' \| 'always' \| 'scroll' \| 'hover'` | `'hover'` | When the scrollbar is visible         |

---

## Examples

### Fixed-Height List

```tsx
import { ScrollArea } from 'xertica-ui/ui';

<ScrollArea className="h-[300px] w-full rounded-md border p-4">
  {items.map(item => (
    <div key={item.id} className="py-2 text-sm">
      {item.name}
    </div>
  ))}
</ScrollArea>;
```

### Sidebar Scroll Area

```tsx
<ScrollArea className="flex-1 px-2">
  {routes.map(route => (
    <NavItem key={route.path} route={route} />
  ))}
</ScrollArea>
```

---

## AI Rules

- Always set an explicit height via `className="h-[300px]"` or `h-full` — `ScrollArea` requires a bounded height to scroll.
- Use inside the Sidebar for the scrollable navigation area.
- Do not use for full-page scrolling — the entire page scroll is managed by the CSS `overflow-y-auto` on the main content container.