# Scroll Area

Source: https://lumeo.nativ.sh/components/scroll-area

# Scroll Area

A scrollable container with styled scrollbar.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

Vertical Scroll

#### 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

Preview Code

Chat Messages

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!

Preview Code

Horizontal Scroll

Item 13

Item 13

Item 13

Item 13

Item 13

Item 13

Item 13

Item 13

Item 13

Item 13

Item 13

Item 13

Preview Code

Focus Ring Gutter

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.

Full name

Email

Company

Role

Phone

City

Country

Save

## 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.

## Related Components

-   [Resizable](/components/resizable) — Resizable panel layouts that often contain scroll areas
-   [Card](/components/card) — Contained content cards that can include scrollable regions