Layout
Resizable
Drag-to-resize panel groups. Supports horizontal, vertical, and nested layouts.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/resizable
Examples
Vertical split
Stack panels and resize along the vertical axis.
Header
Content
Handle
Use the withHandle prop on ResizableHandle to show a visible handle.
Sidebar
Content
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
واحد
اثنان
ثلاثة
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { ResizableGroup, ResizablePanel, ResizableSeparator } from "@codefast/ui/resizable";
<ResizableGroup>
<ResizablePanel defaultSize={30} minSize={20}>…</ResizablePanel>
<ResizableSeparator />
<ResizablePanel defaultSize={70}>…</ResizablePanel>
</ResizableGroup>
API reference
Props for each part of the component. All native element props are also forwarded.
ResizableGroup
A row or column of resizable panels.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Axis the panels are laid along. |
ResizablePanel
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultSize / minSize / maxSize | number (percent) | — | Initial and bounded size of the panel. |
ResizableSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
| — | — | — | The draggable handle placed between two panels. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus to a separator handle. |
| Arrow+Left | Resizes the panels by a step. |
| Arrow+Right | Resizes the panels by a step. |
- Each handle is a focusable separator with aria-valuenow for its position.
- Set sensible minSize so panels can’t collapse to nothing by accident.
- Provide a non-drag fallback layout on touch where resizing is awkward.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for app shells — sidebars, editors, split views.
- Set min/max sizes to keep panels usable.
Don’t
- Don’t use for simple content that doesn’t need resizing.
- Don’t allow a panel to shrink below a readable size.