Navigation
Resizable Panels
Hairline handles that thicken and reveal a grip on hover or drag. Keyboard-resizable, collapsible panels, double-click to reset.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { EdgeResizer } from "@nibapp/ui/components/edge-resizer";import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@nibapp/ui/components/resizable";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
EdgeResizer
A vertical splitter on the edge of a fixed-width box (a sidebar, a floating panel), for boxes that aren't panels of a ResizablePanelGroup. A focusable `separator` with its value, so it works from the keyboard (←/→, Home/End) and reads as a splitter, like ResizableHandle. Pointer and arrow keys move the handle on screen, so in a right-to-left layout the same drag widens the box from its other side.
| Prop | Type | Default | Description |
|---|---|---|---|
| edge (required) | "start" | "end" | — | The box's edge the handle sits on, in the writing direction (`end` is the right edge left to right, the left edge right to left): dragging away from the box makes it wider. |
| label (required) | string | — | Accessible name, e.g. "Resize sidebar". |
| value (required) | number | — | Current width, px. |
| min (required) | number | — | |
| max (required) | number | — | |
| onResize (required) | (width: number) => void | — | Called with the wanted width; the owner clamps and stores it. |
| onReset (required) | () => void | — | Double-click: back to the default width. |
| className | string | — |
ResizableHandle
Hairline divider that thickens and reveals a grip on hover, focus and drag. Keyboard: focus and use arrow keys (Home/End jump to min/max). Double-click resets the neighbouring panel to its default size.
| Prop | Type | Default | Description |
|---|---|---|---|
| withGrip | boolean | false | Show the grip pill at rest, not only on hover/drag. |
Also takes .
ResizablePanel
One resizable region. Sizes: numbers are px, unitless strings are %, or use explicit units (`"240px"`, `"30%"`, `"16rem"`).
Also takes ComponentProps<typeof Panel>.
ResizablePanelGroup
Lays out panels side by side (`horizontal`) or stacked (`vertical`).
Also takes ComponentProps<typeof Group>.