Resizable Panels

React split panes with draggable handles in both directions, min and max sizes, snap to collapse, keyboard resizing, double click reset and nested groups.

src/registry/ui/resizable-panels.tsx/r/resizable-panels.json

Installation#

bash

npx shadcn@latest add @minidev/resizable-panels

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/resizable-panels.json

Usage#

tsx

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

export function Example() {
  return (
    <ResizablePanels left={<p className="text-sm text-fg-muted">Left pane</p>} right={<p className="text-sm text-fg-muted">Right pane</p>} />
  )
}

API reference#

ResizablePanels props
Prop	Type	Default
`children`	`React.ReactNode`	`-`
`orientation`	`Orientation`	`"horizontal"`
`sizes`	`number[]`	`-`
`defaultSizes`	`number[]`	`-`
`onSizesChange`	`(sizes: number[]) => void`	`-`
`keyboardStep`	`number`	`2`
`left`	`React.ReactNode`	`-`
`right`	`React.ReactNode`	`-`
`initial`	`number`	`50`
`className`	`string`	`-`