Resizable

Accessible resizable panel groups and layouts with keyboard support.

Corvu

One

Two

Three

1
import {
2
  ResizableHandle,
3
  ResizablePanel,
4
  ResizablePanelGroup,
5
} from "~/components/ui/resizable";
6

7
export default function ResizableDemo() {
8
  return (
9
    <ResizablePanelGroup orientation="horizontal" class="max-w-sm rounded-lg border">
10
      <ResizablePanel initialSize={0.5}>
11
        <div class="flex h-[200px] items-center justify-center p-6">
12
          <span class="font-semibold">One</span>
13
        </div>
14
      </ResizablePanel>
15
      <ResizableHandle withHandle />
16
      <ResizablePanel initialSize={0.5}>
17
        <ResizablePanelGroup orientation="vertical">
18
          <ResizablePanel initialSize={0.25}>
19
            <div class="flex h-full items-center justify-center p-6">
20
              <span class="font-semibold">Two</span>
21
            </div>
22
          </ResizablePanel>
23
          <ResizableHandle withHandle />
24
          <ResizablePanel initialSize={0.75}>
25
            <div class="flex h-full items-center justify-center p-6">
26
              <span class="font-semibold">Three</span>
27
            </div>
28
          </ResizablePanel>
29
        </ResizablePanelGroup>
30
      </ResizablePanel>
31
    </ResizablePanelGroup>
32
  );
33
}

About

The Resizable component is built on top of Corvu Resizable by Jasmin.

Installation

pnpm dlx shadcn@latest add @zaidan/resizable
npx shadcn@latest add @zaidan/resizable
yarn dlx shadcn@latest add @zaidan/resizable
bunx --bun shadcn@latest add @zaidan/resizable

Usage

1
import {
2
  ResizableHandle,
3
  ResizablePanel,
4
  ResizablePanelGroup,
5
} from "~/components/ui/resizable";

1
<ResizablePanelGroup orientation="horizontal">
2
  <ResizablePanel initialSize={0.25}>One</ResizablePanel>
3
  <ResizableHandle />
4
  <ResizablePanel initialSize={0.75}>Two</ResizablePanel>
5
</ResizablePanelGroup>

Composition

Use the following composition to build a ResizablePanelGroup:

ResizablePanelGroup
├── ResizablePanel
├── ResizableHandle
└── ResizablePanel

Vertical

Use orientation="vertical" for vertical resizing.

Header

Content

1
import {
2
  ResizableHandle,
3
  ResizablePanel,
4
  ResizablePanelGroup,
5
} from "~/components/ui/resizable";
6

7
export default function ResizableVertical() {
8
  return (
9
    <ResizablePanelGroup orientation="vertical" class="min-h-[200px] max-w-sm rounded-lg border">
10
      <ResizablePanel initialSize={0.25}>
11
        <div class="flex h-full items-center justify-center p-6">
12
          <span class="font-semibold">Header</span>
13
        </div>
14
      </ResizablePanel>
15
      <ResizableHandle />
16
      <ResizablePanel initialSize={0.75}>
17
        <div class="flex h-full items-center justify-center p-6">
18
          <span class="font-semibold">Content</span>
19
        </div>
20
      </ResizablePanel>
21
    </ResizablePanelGroup>
22
  );
23
}

Handle

Use the withHandle prop on ResizableHandle to show a visible handle.

Sidebar

Content

1
import {
2
  ResizableHandle,
3
  ResizablePanel,
4
  ResizablePanelGroup,
5
} from "~/components/ui/resizable";
6

7
export default function ResizableHandleDemo() {
8
  return (
9
    <ResizablePanelGroup orientation="horizontal" class="min-h-[200px] max-w-sm rounded-lg border">
10
      <ResizablePanel initialSize={0.25}>
11
        <div class="flex h-full items-center justify-center p-6">
12
          <span class="font-semibold">Sidebar</span>
13
        </div>
14
      </ResizablePanel>
15
      <ResizableHandle withHandle />
16
      <ResizablePanel initialSize={0.75}>
17
        <div class="flex h-full items-center justify-center p-6">
18
          <span class="font-semibold">Content</span>
19
        </div>
20
      </ResizablePanel>
21
    </ResizablePanelGroup>
22
  );
23
}

API Reference

See the Corvu Resizable documentation for the primitive API.