# Resizable

Source: https://lumeo.nativ.sh/components/resizable

# Resizable

Accessible resizable panel groups and layouts with drag-to-resize handles.

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

<Resizable />

## When to Use

-   Split pane layouts such as a sidebar + content area
-   Adjustable layouts where users control how much space each section occupies
-   IDE-like or editor panels with resizable code, preview, and console areas
-   Dashboards where users want to resize widgets or data panels

Preview Code

Horizontal

Panel One

Panel Two

Preview Code

Vertical

Top

Bottom

Preview Code

Three Panels

Sidebar

Content

Panel

## API Reference

### ResizablePanelGroup

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The panels and handles content.

Direction

Lumeo.Orientation

Horizontal

Layout direction. Values: Horizontal, Vertical.

DefaultSizes

double\[\]?

null

Initial size percentages for each panel (e.g. \[50, 50\]).

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### ResizablePanel

Prop

Type

Default

Description

ChildContent

RenderFragment?

null

The panel content.

Order

int

0

Zero-based index of the panel within the group.

DefaultSize

double

50

Default size as a percentage of the group.

MinSize

double

10

Minimum size percentage.

MaxSize

double

90

Maximum size percentage.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

### ResizableHandle

Prop

Type

Default

Description

PanelIndex

int

\-

Index of the panel to the left/above this handle. Required.

WithHandle

bool

false

Shows a visible grip icon on the handle.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [ScrollArea](/components/scroll-area) — Styled scrollable container for overflowing panel content
-   [Card](/components/card) — Contained content sections that can live inside resizable panels
-   [Sidebar](/components/sidebar) — Collapsible navigation sidebar for app-level layouts