Scroll Area
Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Scroll Shadows
Scroll shadows automatically appear to indicate more content is available in that direction.
Vertical Shadows
Horizontal Shadows
Default (Vertical)
A scrollable area with custom styled scrollbar.
Horizontal Scroll
Scroll horizontally through content.
Both Scrollbars
Scroll in both directions.
Card List
Scrollable list of cards.
Chat Messages
Common chat/messaging interface pattern.
Chat
Scroll Types
Different scrollbar visibility behaviors.
Auto (default)
Always Visible
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Type | ScrollAreaType | Auto | Scrollbar visibility. Options: Auto, Always, Scroll, Hover. |
| ShowVerticalScrollbar | bool | true | Whether to show the vertical scrollbar. |
| ShowHorizontalScrollbar | bool | false | Whether to show the horizontal scrollbar. |
| EnableScrollShadows | bool | false | When true, scroll shadows appear at edges to indicate overflow content. |
| Class | string? | — | Additional CSS classes for the scroll area root. |
| ChildContent | RenderFragment? | — | The scrollable content. |
Features
- Custom styled scrollbars consistent across browsers
- Vertical and horizontal scroll support
- Multiple scroll types: Auto, Always, Scroll, Hover
- Scroll shadows in both directions (new)
- Enhanced scrollbar styling with hover states (new)
- Works with any content
- Tailwind CSS styling integration