ScrollArea
A styled scrollable container with thin scrollbars and optional fade indicators.
Setup
import { ScrollArea } from '@fragments-sdk/ui';Examples
Vertical
Vertical scrollable area with thin scrollbar.
Loading preview...
Horizontal
Horizontal scrollable area for overflowing inline content like tabs or chips.
Loading preview...
With Fades
Fade indicators show when content is scrollable in either direction.
Loading preview...
Hover Scrollbar
Scrollbar is hidden until the user hovers over the scroll area.
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Scrollable content |
orientation | enumhorizontalverticalboth | vertical | Scroll direction |
scrollbarVisibility | enumautoalwayshover | auto | When to show the scrollbar |
showFades | boolean | false | Show gradient fade indicators at scroll edges |
className | string | Not set | Additional class name |
Usage Guidelines
When to use
- Content overflows its container and needs scrolling
- Horizontal tab bars or chip lists that may overflow
- Scrollable panels, sidebars, or dropdown content
- Any area where native scrollbars look too heavy
When not to use
- Page-level scrolling (use native body scroll)
- Very short content that never overflows
Best practices
- Use `orientation` to constrain scroll direction
- Use `showFades` to hint at hidden content beyond the viewport
- The `hover` scrollbar visibility keeps the UI clean until the user interacts
- Combine with `orientation="horizontal"` for tab bars and chip rows
Accessibility
- Preserves native scroll behavior and keyboard support
- Scrollbar is visible on focus for keyboard users
- Respects prefers-reduced-motion for fade transitions