ResizablePanels
Resizable split panel layout with a draggable divider. Supports horizontal and vertical directions.
Horizontal Split
Side-by-side panels with a draggable divider. Drag the handle to resize.
Sidebar navigation or file tree goes here. Drag the divider to resize.
Main content area. This panel expands or shrinks as the divider moves.
Vertical Split
Top-bottom stacked panels with a horizontal drag handle between them.
Code editor or input area. Drag the horizontal divider to resize.
Terminal output or preview pane below.
IDE Layout
File explorer and code editor side by side, mimicking an IDE layout.
EXPLORER
src
index.flin
app.flin
entities
EDITOR
entity Todo {
title: text
done: bool = false
}
Email Client
Inbox list and message preview in a resizable split view.
INBOX
New sprint starts Monday...
Issue #42 has been resolved...
Thanks for signing up...
Team Update
From: [email protected] - Today
Hi team, the new sprint starts Monday. Please review the backlog and update your task estimates before the planning meeting.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
direction | text | "horizontal" | Split direction: "horizontal" (side by side) or "vertical" (stacked) |
children | content | - | Exactly two child elements for the left/right or top/bottom panels |