import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as ScrollAreaStories from './scroll-area.stories';

<Meta of={ScrollAreaStories} />

<Title />
<Subtitle>Custom scrollbar styling for consistent cross-browser scrolling.</Subtitle>

<Description />

<Primary />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
> - **Height Constraints** — `ScrollArea` requires an explicit height (e.g., `h-72` or `h-full`) on the component via `className` to function correctly.
> - **Design Consistency** — Prefer `ScrollArea` over native `overflow-y-auto` for UI-critical scrollbars to ensure they match the application theme.