Resizable

Panels that share a space, with handles between them to resize them.

src
- app.tsx
- main.tsx
package.json

export function App() {
  return <h1>Hello, world</h1>;
}

$ pnpm dev
  VITE ready in 312 ms
  ➜  Local:   http://localhost:5173/

import { FileCodeIcon, FileJsonIcon, FolderIcon } from "lucide-react";

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tree, TreeItem } from "@/components/ui/tree";

export default function ResizableEditor() {
  return (
    <div className="h-80 w-full max-w-2xl overflow-hidden rounded-lg border-[0.5px] border-border-muted">
      <ResizablePanelGroup>
        <ResizablePanel defaultSize={35} minSize={20} collapsible className="bg-layer-1">
          <ScrollArea className="h-full">
            <Tree
              aria-label="Files"
              defaultExpanded={["src"]}
              defaultValue="src/app.tsx"
              className="p-1.5"
            >
              <TreeItem value="src" label="src" icon={<FolderIcon />}>
                <TreeItem value="src/app.tsx" label="app.tsx" icon={<FileCodeIcon />} />
                <TreeItem value="src/main.tsx" label="main.tsx" icon={<FileCodeIcon />} />
              </TreeItem>
              <TreeItem value="package.json" label="package.json" icon={<FileJsonIcon />} />
            </Tree>
          </ScrollArea>
        </ResizablePanel>
        <ResizableHandle aria-label="Resize files" />
        <ResizablePanel>
          <ResizablePanelGroup orientation="vertical">
            <ResizablePanel defaultSize={65} minSize={25}>
              <ScrollArea className="h-full">
                <pre className="p-4 font-mono text-sm whitespace-pre-wrap text-foreground">
                  {`export function App() {
  return <h1>Hello, world</h1>;
}`}
                </pre>
              </ScrollArea>
            </ResizablePanel>
            <ResizableHandle aria-label="Resize editor" />
            <ResizablePanel minSize={15} collapsible className="bg-layer-1">
              <ScrollArea className="h-full">
                <pre className="p-4 font-mono text-2xs whitespace-pre-wrap text-muted-foreground">
                  {`$ pnpm dev
  VITE ready in 312 ms
  ➜  Local:   http://localhost:5173/`}
                </pre>
              </ScrollArea>
            </ResizablePanel>
          </ResizablePanelGroup>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add resizable
pnpm dlx shadcn@latest add @jarvis/resizable

Usage

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";

export function Workspace() {
  return (
    <ResizablePanelGroup className="h-96">
      <ResizablePanel defaultSize={25} minSize={15}>
        Sidebar
      </ResizablePanel>
      <ResizableHandle aria-label="Resize sidebar" />
      <ResizablePanel>Content</ResizablePanel>
    </ResizablePanelGroup>
  );
}

Put ResizablePanels directly in ResizablePanelGroup, or in a Fragment there, with a ResizableHandle between each pair. The group finds its panels among its children, so a panel inside a component of your own throws an error; a handle can sit in one. The group fills its parent, so give the parent a height, or give the group one with className. Sizes are percentages of the group: defaultSize sets where a panel starts, panels without one share what's left, and minSize and maxSize bound it. A panel clips what overflows it, so put long content in a Scroll Area, and put padding on the panel's content rather than the panel, so the panel's size is all the space it takes.

A handle resizes the panels on either side of it. Drag it, or focus it and use the arrow keys to move it 5% at a time, and Home and End to move it as far as it goes. Give each handle an aria-label that names the panel before it, which is the one its value describes.

Composition

ResizablePanelGroup
- ResizablePanel
- ResizableHandle

Examples

Vertical

Set orientation="vertical" to stack the panels. Groups nest, so a panel can hold a group of the other orientation, as the terminal in the example above does.

select name, email
from customers
where plan = 'team';

Run the query to see results.

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { ScrollArea } from "@/components/ui/scroll-area";

export default function ResizableVertical() {
  return (
    <div className="h-64 w-full max-w-md overflow-hidden rounded-lg border-[0.5px] border-border-muted">
      <ResizablePanelGroup orientation="vertical">
        <ResizablePanel defaultSize={40} minSize={20}>
          <ScrollArea className="h-full">
            <pre className="p-4 font-mono text-sm whitespace-pre-wrap text-foreground">
              {`select name, email
from customers
where plan = 'team';`}
            </pre>
          </ScrollArea>
        </ResizablePanel>
        <ResizableHandle aria-label="Resize query" />
        <ResizablePanel minSize={20} className="bg-layer-1">
          <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
            Run the query to see results.
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

With handle

withHandle puts a grip on the line, which is easier to find and to grab on a touch screen.

Sidebar

Content

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";

export default function ResizableWithHandle() {
  return (
    <div className="h-48 w-full max-w-md overflow-hidden rounded-lg border-[0.5px] border-border-muted">
      <ResizablePanelGroup>
        <ResizablePanel defaultSize={35} minSize={20} className="bg-layer-1">
          <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
            Sidebar
          </div>
        </ResizablePanel>
        <ResizableHandle withHandle aria-label="Resize sidebar" />
        <ResizablePanel minSize={30}>
          <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
            Content
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

Collapsible

A collapsible panel collapses to collapsedSize, 0 by default, once it's dragged past half its minSize, or when an arrow key pushes it past minSize. Enter on the handle collapses the panel before it, or the one after it when only that one is collapsible, or restores it to its last size, and a panel at 0 is hidden. A handle never moves either neighbor past its minSize or maxSize, so a panel only collapses when the panel beside it can take the space.

Pass layout and onLayoutChange to set the sizes yourself, such as from a button, with one size per panel. An uncontrolled group goes back to its defaultSizes when panels are added or removed, and refits its sizes when a panel's minSize or maxSize changes, calling onLayoutChange either way.

Sidebar

Content

import * as React from "react";

import { Button } from "@/components/ui/button";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";

export default function ResizableCollapsible() {
  const [layout, setLayout] = React.useState([30, 70]);
  const [lastWidth, setLastWidth] = React.useState(30);
  const collapsed = layout[0] === 0;

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Button
        variant="secondary"
        size="sm"
        className="self-start"
        onClick={() => {
          if (!collapsed) setLastWidth(layout[0]);
          setLayout(collapsed ? [lastWidth, 100 - lastWidth] : [0, 100]);
        }}
      >
        {collapsed ? "Show sidebar" : "Hide sidebar"}
      </Button>
      <div className="h-48 overflow-hidden rounded-lg border-[0.5px] border-border-muted">
        <ResizablePanelGroup layout={layout} onLayoutChange={setLayout}>
          <ResizablePanel minSize={20} collapsible className="bg-layer-1">
            <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
              Sidebar
            </div>
          </ResizablePanel>
          <ResizableHandle aria-label="Resize sidebar" />
          <ResizablePanel>
            <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
              Content
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
    </div>
  );
}

Disabled

A disabled handle stays where it is: it can't be dragged, the keyboard skips it, and it shows the not-allowed cursor. Panels keep their sizes, and the other handles still move them.

Lock layout

Sidebar

Content

import * as React from "react";

import { Field, FieldLabel } from "@/components/ui/field";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { Switch } from "@/components/ui/switch";

export default function ResizableDisabled() {
  const [locked, setLocked] = React.useState(true);

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Field orientation="horizontal" className="self-start">
        <Switch checked={locked} onCheckedChange={setLocked} />
        <FieldLabel>Lock layout</FieldLabel>
      </Field>
      <div className="h-48 overflow-hidden rounded-lg border-[0.5px] border-border-muted">
        <ResizablePanelGroup>
          <ResizablePanel defaultSize={35} minSize={20} className="bg-layer-1">
            <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
              Sidebar
            </div>
          </ResizablePanel>
          <ResizableHandle withHandle disabled={locked} aria-label="Resize sidebar" />
          <ResizablePanel minSize={30}>
            <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
              Content
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
    </div>
  );
}

Props

Part	Extends
ResizablePanelGroup	<div>
ResizablePanel	<div>
ResizableHandle	<div>

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.

ResizablePanelGroup

Prop	Type	Default
`orientation` Lays the panels out in a row, with handles between them that move sideways, or in a column.	`"horizontal" \| "vertical"`	`"horizontal"`
`layout` Each panel's size, as a percentage of the group, one per panel. Without it, or with the wrong number of sizes, the panels start at their `defaultSize`.	`number[]`	—
`onLayoutChange` Called with the new sizes when a handle moves them, and when adding, removing or rebounding panels refits them.	`((layout: number[]) => void)`	—

ResizablePanel

Prop	Type	Default
`defaultSize` The panel's starting size, as a percentage of the group. Panels without one share the rest.	`number`	—
`minSize` The smallest size, as a percentage of the group.	`number`	—
`maxSize` The largest size, as a percentage of the group.	`number`	—
`collapsible` Lets the panel collapse when it's dragged past half its `minSize`.	`boolean`	—
`collapsedSize` The size it collapses to, as a percentage of the group.	`number`	—

ResizableHandle

Prop	Type	Default
`withHandle` Shows a grip on the line, which is easier to find and to grab on a touch screen.	`boolean`	`false`
`disabled` Keeps the handle from being dragged or moved with the keyboard, and takes it out of the tab order.	`boolean`	`false`