Resizable

Split panes for admin layouts, docs and editors. Hairline dividers with a wide grab area follow the pointer; collapsible panels snap shut past half their minimum. Dividers are APG window splitters: arrows step, Home/End jump to the limits, Enter or double-click collapses with a spring. Groups nest.

npx @kznlabs/labsui add resizable

#general

No messages yet.

Wade muted Cameron for 10 minutes
Bot deployed v2.4.1
Jane changed the server icon
Esther joined the server
Slow mode on #general set to 5s
Brooklyn pinned a message in #clips
Wade removed 12 spam messages
Jane created the role Event host
Cameron left the server
Bot restarted after an update
Esther boosted the server
Jane renamed #memes to #fun

Drag a divider, or focus it and use the arrow keys. Enter or double-click collapses.

import {  ResizableHandle,  ResizablePanel,  ResizablePanelGroup,} from "@/components/ui/resizable";export function AdminLayout({  nav,  log,  children,}: {  nav: React.ReactNode;  log: React.ReactNode;  children: React.ReactNode;}) {  return (    <ResizablePanelGroup      className="h-dvh"      onLayout={(sizes) => {        document.cookie = `layout=${JSON.stringify(sizes)}; path=/`;      }}    >      <ResizablePanel defaultSize={22} minSize={15} maxSize={40} collapsible>        {nav}      </ResizablePanel>      <ResizableHandle aria-label="Resize navigation" withHandle />      <ResizablePanel>        <ResizablePanelGroup direction="vertical">          <ResizablePanel defaultSize={70}>{children}</ResizablePanel>          <ResizableHandle aria-label="Resize log" />          <ResizablePanel minSize={15} collapsible>            {log}          </ResizablePanel>        </ResizablePanelGroup>      </ResizablePanel>    </ResizablePanelGroup>  );}

<ResizablePanelGroup>

Split panes (admin layouts, docs, editors). Sizes are % of the group. Handles are APG window splitters: arrows step, Home/End jump to the limits, Enter collapses a collapsible neighbor. Drag follows the pointer; keys and toggles spring. Panels and handles find their order in the DOM, so wrappers and Server Component parents work. Until hydration the layout is plain CSS (defaultSize as a flex basis, the others share the rest), so SSR already shows it.

directiondefault "horizontal"
Direction
"horizontal": panels side by side. "vertical": stacked.
keyboardStepdefault 5
number
% per arrow key press.
onLayout
(sizes: number[]) => void
Final sizes after each drag, key or toggle, e.g. to save them in a cookie for SSR.

Prop	Type	Default
`direction` "horizontal": panels side by side. "vertical": stacked.	`Direction`	`"horizontal"`
`keyboardStep` % per arrow key press.	`number`	`5`
`onLayout` Final sizes after each drag, key or toggle, e.g. to save them in a cookie for SSR.	`(sizes: number[]) => void`	—

Also accepts every <div> prop.

<ResizablePanel>

collapsedSizedefault 0
number
Share in % when collapsed (default 0), e.g. an icon rail.
collapsibledefault false
boolean
Dragging past half the minimum snaps it shut; Enter or double-click on the handle toggles.
defaultSize
number
Starting share of the group in %. Panels without one split what is left evenly.
maxSizedefault 100
number
Largest size in % of the group.
minSizedefault 10
number
Smallest share in % (default 10).

Prop	Type	Default
`collapsedSize` Share in % when collapsed (default 0), e.g. an icon rail.	`number`	`0`
`collapsible` Dragging past half the minimum snaps it shut; Enter or double-click on the handle toggles.	`boolean`	`false`
`defaultSize` Starting share of the group in %. Panels without one split what is left evenly.	`number`	—
`maxSize` Largest size in % of the group.	`number`	`100`
`minSize` Smallest share in % (default 10).	`number`	`10`

Also accepts every <div> prop.

<ResizableHandle>

The divider between two panels. withHandle adds a visible grip.

withHandle
boolean
Visible grip in the middle of the divider.

Prop	Type	Default
`withHandle` Visible grip in the middle of the divider.	`boolean`	—

Also accepts every <div> prop.

type Direction: "horizontal" | "vertical"

* required. Every component also takes className.