Resizable panels

Trade space between panes by dragging the divider between them.

$npx shadcn@latest add @silicon-ui/resizable-panels

split viewresizablepanes

Installation

$npx shadcn@latest add @silicon-ui/resizable-panels

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/resizable-panels/resizable-panels.tsx
- components/silicon-ui/resizable-panels/resizable-panels.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ResizablePanels } from "@/components/silicon-ui/resizable-panels/resizable-panels";

Prop	Type	Default
`children*` `ResizablePanel` elements, in order. The set of panes should stay the same for the life of the group.	`ReactNode`	—
`label` Names the group for assistive technology.	`string`	—
`onLayoutChange` Called with each pane's share in percent after a resize settles.	`(sizes: number[]) => void`	—
`className`	`string`	—

Prop	Type	Default
`id*` Stable id, also used by the dividers' `aria-controls`.	`string`	—
`label*` Names the pane for its divider, for example "Folders".	`string`	—
`defaultSize*` Starting share of the group. Shares are relative, so they need not add up to 100.	`number`	—
`minSize` Width in px where the pane starts to resist. Its content never reflows below it; it clips and fades instead.	`number`	—
`maxSize`	`number`	—
`collapsible` Dragging well past the minimum, or flicking toward the edge, snaps the pane closed. Its divider then shows a restore tab.	`boolean`	—
`defaultCollapsed`	`boolean`	—
`className`	`string`	—
`children`	`ReactNode`	—