Scroll Area
A scrollable container with styled scrollbar.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <ScrollArea />
When to Use
- Custom scrollbar styling to match your application theme
- Overflow containers for long lists, chat messages, or log output
- Horizontal scrolling galleries or carousels of items
- Any fixed-height or fixed-width region where content may exceed the visible area
Enable FocusRingGutter when the scroll area holds focusable controls (inputs, buttons) whose focus ring would otherwise clip at the left/right edge. It applies a net-zero -mx-1 px-1 gutter so the ring renders in full.
API Reference
ScrollArea
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | Scrollable content. |
| FocusRingGutter | bool | false | When true, applies a net-zero -mx-1 px-1 gutter so focus rings of edge-touching controls don't clip against the overflow boundary. Put any padding on an inner wrapper, not the ScrollArea root. |
| Class | string? | null | Additional CSS classes. Set height/width constraints here (e.g. "h-72 w-48"). |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |