Resizable

Panels whose sizes you change by dragging the handle between them, or with the keyboard.

$ pnpm dlx shadcn@latest add https://dashral.com/r/resizable.json

Sidebar

Content

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/resizable.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/resizable

Usage

example.tsx

1import { Resizable } from "@/components/dashral/resizable"
2
3<Resizable
4  withHandle
5  panels={[
6    { content: <Sidebar />, defaultSize: 30, minSize: 20 },
7    { content: <Editor />, minSize: 40 },
8  ]}
9  className="h-96 rounded-lg border"
10/>

Examples

Nested

A vertical Resizable inside a panel of a horizontal one, like a mail app.

Inbox

Messages

Reading pane

Email client

Three panes — folders, messages, the open message — that you can resize with the mouse or the arrow keys.

Checkout copy reviewOlivia Martin · 9:12

Hi! The new checkout copy is in the doc. Could you look at the promo code text before Friday? I tried to keep it short. Thanks, Olivia

API reference

Resizable

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`panels`	`{ content, defaultSize?, minSize?, maxSize?, className? }[]` In order, a handle between each two. Sizes in percent. Required.	—
`direction`	`"horizontal" \| "vertical"` Side by side, or stacked; put a Resizable in a panel to split it the other way.	`"horizontal"`
`withHandle`	`boolean` A grip on each handle.	`false`
`onLayout`	`(sizes: number[]) => void` Every panel's size (percent) when a resize ends — store it to restore the layout.	—
`classNames`	`{ panel, handle }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`←`or`→`	Move the boundary 2% (↑ / ↓ in a vertical group)
`Shift+arrow keys`	Move it 10%
`Home`or`End`	The panel's smallest / largest size

Accessibility

Handles are focusable role="separator" with aria-valuenow (the panel before it, in percent), min, max and aria-controls — the WAI-ARIA window splitter pattern.