Resizable Panels

Panels with draggable dividers. Free, MIT · Navigation and layout › Structure

Panels side by side or stacked, with handles between them; ResizablePanels.Panel and .Handle are the parts.

Installation

npx valyro-cli@latest add resizable-panels

npx shadcn@latest add https://valyro.xyz/r/resizable-panels.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ResizablePanels } from 'valyro-ui';

Prop	Type	Default
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	`horizontal` puts panels side by side (following the reading direction); `vertical` stacks them.
`layout`	`number[]`		Panel sizes in percent, in panel order. Controlled: pair with `onLayout`.
`onLayout`	`(layout: number[]) => void`		Called with the new sizes on every drag step, key press, collapse or expand, and when a saved layout is restored.
`autoSaveId`	`string`		Remembers the layout in localStorage under this id and restores it on mount (after hydration).
`keyboardStep`	`number`	`2`	Percent an arrow key moves a focused handle; Shift moves five times as far.

ResizablePanels.Panel (ResizablePanel), ResizablePanels.Handle (ResizableHandle)

App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Breadcrumbs — Breadcrumb trail
Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode