ScrollArea
Custom scrollable container with styled scrollbars. Supports vertical, horizontal, or both orientations.
Usage
tsx
1import { ScrollArea } from '@storm-ds/ui'23<ScrollArea className="h-48">4 <div className="space-y-2">5 {items.map(item => <p key={item}>{item}</p>)}6 </div>7</ScrollArea>Vertical
Horizontal
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'vertical' | 'horizontal' | 'both' | 'vertical' | Scroll direction |
| className | string | - | Custom classes (set height/width) |
Use with AI
Create a Next.js component using Storm UI's ScrollArea. Import: `import { ScrollArea } from '@storm-ds/ui'`. Set height/width via className. Orientation: vertical (default), horizontal, both. Styled webkit scrollbars. Server component compatible. Example: `<ScrollArea className="h-64"><div>Long content...</div></ScrollArea>`