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
Tags
Blazor
ASP.NET Core
C#
Tailwind CSS
ECharts
SignalR
Entity Framework
gRPC
Minimal APIs
MudBlazor
Radzen
FluentUI
Lumeo
MAUI
.NET 10
WebAssembly
Server-side
Auto render
Alice
Hey, did you review the PR?
You
Yes! Left some comments.
Alice
Thanks. I'll address them now.
You
No rush, take your time.
Alice
Done. Can you re-review?
You
On it!
Alice
Appreciate it, thanks!
Item 13
Item 13
Item 13
Item 13
Item 13
Item 13
Item 13
Item 13
Item 13
Item 13
Item 13
Item 13
Control when the scrollbar appears with Type: Auto (on overflow), Always (always visible, gutter reserved), Scroll (while scrolling), or Hover (on hover/focus).
Always
Blazor
ASP.NET Core
C#
Tailwind CSS
ECharts
SignalR
Entity Framework
gRPC
Minimal APIs
MudBlazor
Radzen
FluentUI
Lumeo
MAUI
.NET 10
WebAssembly
Server-side
Auto render
Hover
Blazor
ASP.NET Core
C#
Tailwind CSS
ECharts
SignalR
Entity Framework
gRPC
Minimal APIs
MudBlazor
Radzen
FluentUI
Lumeo
MAUI
.NET 10
WebAssembly
Server-side
Auto render
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. |
| AriaLabel | string? | null | Accessible name for the scrollable region. Renders aria-label and marks the region as a named landmark (role="region") so it isn't just a bare, unnamed focusable div. Set whenever the region's purpose isn't already conveyed by a preceding heading/label. |
| Type | ScrollAreaType | Auto | When the scrollbars become visible. Auto shows on overflow, Always stays visible with the gutter reserved, Scroll shows while scrolling, Hover shows on hover/focus-within. |
| 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. |