Skip to main content

Resizable

Panel groups with draggable, keyboard accessible handles. Horizontal, vertical and nested layouts.

Files
  • app/layout.tsx
  • app/page.tsx
  • lib/db.ts
Editor
1'use client';
2

3import { Resizable } from '@/components/ui/resizable';
4

5export function Default() {
6  return (
7    <Resizable className="border-border bg-card h-48 w-full max-w-md rounded-lg border">
8      <Resizable.Panel defaultSize={35} minSize={20}>
9        <div className="flex h-full flex-col gap-2 p-4">
10          <span className="text-sm font-medium">Files</span>
11          <ul className="text-muted-foreground flex flex-col gap-1 font-mono text-xs">
12            <li>app/layout.tsx</li>
13            <li>app/page.tsx</li>
14            <li>lib/db.ts</li>
15          </ul>
16        </div>
17      </Resizable.Panel>
18      <Resizable.Handle withHandle />
19      <Resizable.Panel minSize={30}>
20        <div className="flex h-full items-center justify-center p-4">
21          <span className="text-muted-foreground text-sm">Editor</span>
22        </div>
23      </Resizable.Panel>
24    </Resizable>
25  );
26}

Installation

pnpm dlx nachui add resizable

Anatomy

1import { Resizable } from '@/components/ui/resizable';
1<Resizable direction="horizontal">
2  <Resizable.Panel defaultSize={30} minSize={20}>
3    Sidebar
4  </Resizable.Panel>
5  <Resizable.Handle withHandle />
6  <Resizable.Panel>Content</Resizable.Panel>
7</Resizable>
Sizes are percentages of the group. Panels without defaultSize share whatever is left. Dragging a handle moves the boundary between the two panels next to it and never lets either one go past its minSize or maxSize. The handle is a separator with aria-valuenow, focusable, and moves with the arrow keys, Home and End. Hold Shift for bigger steps.

Composition

Resizable
├── Resizable.Panel
├── Resizable.Handle
└── Resizable.Panel
Panels and handles must be direct children of the group so it can number them. Nest another Resizable inside a panel for grids.

Variants

Default

Two panels side by side with a visible grip on the handle.
Files
  • app/layout.tsx
  • app/page.tsx
  • lib/db.ts
Editor
1'use client';
2

3import { Resizable } from '@/components/ui/resizable';
4

5export function Default() {
6  return (
7    <Resizable className="border-border bg-card h-48 w-full max-w-md rounded-lg border">
8      <Resizable.Panel defaultSize={35} minSize={20}>
9        <div className="flex h-full flex-col gap-2 p-4">
10          <span className="text-sm font-medium">Files</span>
11          <ul className="text-muted-foreground flex flex-col gap-1 font-mono text-xs">
12            <li>app/layout.tsx</li>
13            <li>app/page.tsx</li>
14            <li>lib/db.ts</li>
15          </ul>
16        </div>
17      </Resizable.Panel>
18      <Resizable.Handle withHandle />
19      <Resizable.Panel minSize={30}>
20        <div className="flex h-full items-center justify-center p-4">
21          <span className="text-muted-foreground text-sm">Editor</span>
22        </div>
23      </Resizable.Panel>
24    </Resizable>
25  );
26}

Vertical

direction="vertical" stacks the panels and the handle becomes a horizontal bar.
Preview

$ pnpm build

Compiled 42 routes in 3.1s

Ready on http://localhost:3000

1'use client';
2

3import { Resizable } from '@/components/ui/resizable';
4

5export function Vertical() {
6  return (
7    <Resizable
8      direction="vertical"
9      className="border-border bg-card h-64 w-full max-w-md rounded-lg border"
10    >
11      <Resizable.Panel defaultSize={60} minSize={25}>
12        <div className="flex h-full items-center justify-center p-4">
13          <span className="text-sm font-medium">Preview</span>
14        </div>
15      </Resizable.Panel>
16      <Resizable.Handle withHandle />
17      <Resizable.Panel minSize={20}>
18        <div className="text-muted-foreground h-full overflow-auto p-4 font-mono text-xs leading-relaxed">
19          <p>$ pnpm build</p>
20          <p>Compiled 42 routes in 3.1s</p>
21          <p>Ready on http://localhost:3000</p>
22        </div>
23      </Resizable.Panel>
24    </Resizable>
25  );
26}

Nested

A vertical group inside a panel of a horizontal group.
Sidebar
Editor
Terminal
1'use client';
2

3import { Resizable } from '@/components/ui/resizable';
4

5export function Nested() {
6  return (
7    <Resizable className="border-border bg-card h-64 w-full max-w-md rounded-lg border">
8      <Resizable.Panel defaultSize={28} minSize={15}>
9        <div className="flex h-full items-center justify-center p-4">
10          <span className="text-muted-foreground text-sm">Sidebar</span>
11        </div>
12      </Resizable.Panel>
13      <Resizable.Handle />
14      <Resizable.Panel minSize={30}>
15        <Resizable direction="vertical">
16          <Resizable.Panel defaultSize={65} minSize={30}>
17            <div className="flex h-full items-center justify-center p-4">
18              <span className="text-sm font-medium">Editor</span>
19            </div>
20          </Resizable.Panel>
21          <Resizable.Handle />
22          <Resizable.Panel minSize={15}>
23            <div className="flex h-full items-center justify-center p-4">
24              <span className="text-muted-foreground text-sm">Terminal</span>
25            </div>
26          </Resizable.Panel>
27        </Resizable>
28      </Resizable.Panel>
29    </Resizable>
30  );
31}

API Reference

Resizable

PropTypeDefaultDescription
direction"horizontal" | "vertical""horizontal"Axis of the layout
onLayout(sizes: number[]) => void-Called with every panel size after a resize
classNamestring-Classes for the group. Give it a height when vertical

Resizable.Panel

PropTypeDefaultDescription
defaultSizenumber-Initial size in percent
minSizenumber10Smallest size in percent
maxSizenumber100Largest size in percent
classNamestring-Additional CSS classes. Content is clipped

Resizable.Handle

PropTypeDefaultDescription
withHandlebooleanfalseRender a small grip in the middle
disabledbooleanfalseIgnore pointer and keyboard
stepnumber2Percent moved per arrow key press
classNamestring-Additional CSS classes
Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue
PreviousRating
NextScroll Area
Ctrl+I