Scroller
A horizontal scroll container with gradient fade indicators. Ideal for tab bars, tag lists, and other content that may overflow its container.
When to use
Do
- ✓Use a scroller for horizontal lists of items (tags, chips, tab pills) that may overflow their container.
- ✓Set scrollbar={false} (default) for a clean UI where the gradient indicators communicate overflow.
- ✓Use inside a constrained container — the scroller takes the full block width.
Don't
- ✕Don't use a scroller for vertical overflow — use overflow-y on a standard container instead.
- ✕Don't place high-priority content only inside a scroller where it may be hidden by overflow.
- ✕Don't nest scrollers inside other scrollers.