# Scroll Area

Augments native scroll functionality for custom, cross-platform styling. Built on top of Radix UI Scroll Area primitive.

## Installation

```bash
npm install @darksnow-ui/scroll-area
```

### Peer Dependencies

```bash
npm install react react-dom
```

## Usage

```tsx
import { ScrollArea } from "@darksnow-ui/scroll-area"

export function ScrollAreaExample() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      <div className="space-y-4">
        {Array.from({ length: 50 }, (_, i) => (
          <div key={i} className="text-sm">
            This is item {i + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}
```

## Props

| Prop      | Type              | Default | Description                    |
|-----------|-------------------|---------|--------------------------------|
| className | string            | -       | Additional CSS classes         |
| children  | React.ReactNode   | -       | Scrollable content             |

## Examples

### Basic Scroll Area

```tsx
<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
    {tags.map((tag) => (
      <div key={tag} className="text-sm">
        {tag}
      </div>
    ))}
  </div>
</ScrollArea>
```

### Horizontal Scroll

```tsx
<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {artworks.map((artwork) => (
      <figure key={artwork.artist} className="shrink-0">
        <div className="overflow-hidden rounded-md">
          <img
            src={artwork.art}
            alt={`Photo by ${artwork.artist}`}
            className="aspect-[3/4] h-fit w-fit object-cover"
            width={300}
            height={400}
          />
        </div>
        <figcaption className="pt-2 text-xs text-theme-content-muted">
          Photo by{" "}
          <span className="font-semibold text-theme-content">
            {artwork.artist}
          </span>
        </figcaption>
      </figure>
    ))}
  </div>
</ScrollArea>
```

## Accessibility

- Native scrolling behavior preserved
- Keyboard navigation support
- Screen reader accessible
- Focus management

## Styling

Uses DarkSnow UI design tokens for consistent theming with custom scrollbars.

## Related Components

- [Dialog](/components/ui/dialog) - Modal containers
- [Sheet](/components/ui/sheet) - Slide-out panels