Resizable
Panels whose shared edge can be dragged: the quiet line, lit with the accent while pointed at or dragged.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/resizableExamples
Three panes
Jobs
Map
Notes
import { ResizableHandle, ResizablePanel, ResizablePanelGroup,} from "@/components/zero/resizable";function Pane({ name }: { name: string }) { return ( <div className="flex size-full items-center justify-center font-bold font-zero text-zero-sm text-zero-text-3 italic"> {name} </div> );}export default function ResizablePanes() { return ( <div className="h-72 w-full max-w-xl border-(length:--zero-stroke-thin) border-zero-line bg-zero-void"> <ResizablePanelGroup orientation="horizontal"> <ResizablePanel defaultSize="30%" minSize="20%"> <Pane name="Jobs" /> </ResizablePanel> <ResizableHandle withHandle /> <ResizablePanel> <ResizablePanelGroup orientation="vertical"> <ResizablePanel defaultSize="60%"> <Pane name="Map" /> </ResizablePanel> <ResizableHandle /> <ResizablePanel> <Pane name="Notes" /> </ResizablePanel> </ResizablePanelGroup> </ResizablePanel> </ResizablePanelGroup> </div> );}Behaviour
The grip is wider than the line. From the keyboard, focus the edge and use the arrow keys. withHandle puts a slanted grip on it. It is react-resizable-panels underneath: sizes take pixels or percentages, and groups nest.
Props
ResizablePanelGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Which way the panels sit. |
ResizablePanel
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultSize / minSize / maxSize | number | string | — | Pixels, or a percentage as a string. |
ResizableHandle
| Prop | Type | Default | Description |
|---|---|---|---|
| withHandle | boolean | false | A slanted grip on the edge. |