Resizable
Explore interactive examples and all component variations in our Storybook.
The Resizable components provide a set of drag-to-resize panels. ResizablePanelGroup establishes the layout direction, ResizablePanel defines each section with a default size, and ResizableHandle renders the draggable divider between panels. Sizes are expressed as percentages and always sum to 100.
Horizontal Panels
Sidebar
- Dashboard
- Projects
- Reports
- Settings
Main Content
Drag the handle to resize the panels. The sidebar starts at 30% and the main area at 70%.
Vertical Split
Editor
function greet(name) {
return `Hello, ${name}!`;
}
Terminal
$ node index.js
Hello, World!
Three Panels
Files
- index.tsx
- styles.css
- utils.ts
- types.ts
Editor
// Main content area
export default function App() {
return <div>Hello</div>;
}
Properties
- Width: 320px
- Height: auto
- Color: #000
With Grip Handle
Left Panel (40%)
Right Panel (60%)
Nested Panels
Left Panel
This panel is a standard fixed panel on the left side of the layout.
Top Right
Upper section of the nested vertical split.
Bottom Right
Lower section — e.g., a terminal or output area.
Properties
ResizablePanelGroup
| Property | Type | Default | Description |
|---|---|---|---|
direction | "horizontal" | "vertical" | - | Layout axis for the child panels. |
className | string | - | Additional CSS classes applied to the group container. |
children | ReactNode | - | ResizablePanel and ResizableHandle elements. |
ResizablePanel
| Property | Type | Default | Description |
|---|---|---|---|
defaultSize | number | - | Initial size of the panel as a percentage (0–100). All sibling panels must sum to 100. |
minSize | number | - | Minimum size the panel can be dragged to (percentage). |
maxSize | number | - | Maximum size the panel can be dragged to (percentage). |
className | string | - | Additional CSS classes. |
children | ReactNode | - | Panel content. |
ResizableHandle
| Property | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | false | Renders a visible grip icon in the center of the handle for discoverability. |
className | string | - | Additional CSS classes applied to the handle element. |
Features
Drag to Resize
Panels can be resized by dragging the ResizableHandle between them. The handle spans the full width (horizontal) or height (vertical) of the group.
Keyboard Accessible
The resize handle is focusable and responds to arrow keys, enabling accessible resizing without a mouse.
Nestable
ResizablePanelGroup components can be nested inside ResizablePanel to create complex grid-like layouts (e.g., a three-pane IDE layout).
Grip Icon
Pass withHandle on ResizableHandle to show a visible grip icon, which improves discoverability for users unfamiliar with drag-to-resize interfaces.
Common Use Cases
- IDE layouts — file explorer + code editor + terminal panels
- Email clients — folder list + message list + reading pane
- Dashboards — configurable widget panels
- Design tools — canvas + properties panel + layers panel
- Data exploration — filters panel + data grid + detail view