Horizontal Split

Side-by-side panels with a draggable divider. Drag the handle to resize.

Left Panel

Sidebar navigation or file tree goes here. Drag the divider to resize.

Right Panel

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.

Top Panel

Code editor or input area. Drag the horizontal divider to resize.

Bottom Panel

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

Team Update

New sprint starts Monday...

Bug Report

Issue #42 has been resolved...

Welcome!

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

<ResizablePanels direction="horizontal"> <div>Left Panel content</div> <div>Right Panel content</div></ResizablePanels><ResizablePanels direction="vertical"> <div>Top Panel content</div> <div>Bottom Panel content</div></ResizablePanels>

Props

PropTypeDefaultDescription
directiontext"horizontal"Split direction: "horizontal" (side by side) or "vertical" (stacked)
childrencontent-Exactly two child elements for the left/right or top/bottom panels