Command Palette

Search for a command to run...

Resizable

Accessible resizable panels with keyboard support.

One
Two
Three

A resizable component built on top of react-resizable-panels.

Installation

npx shadcn@latest add resizable

Usage

import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
<ResizablePanelGroup direction="horizontal">
<ResizablePanel>
  <div className="flex h-full items-center justify-center p-6">
    <span className="font-semibold">One</span>
  </div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel>
  <div className="flex h-full items-center justify-center p-6">
    <span className="font-semibold">Two</span>
  </div>
</ResizablePanel>
</ResizablePanelGroup>

Examples

Horizontal

Sidebar
Content
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
export default function ResizableDemo() {
return (
  <ResizablePanelGroup
    direction="horizontal"
    className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
  >
    <ResizablePanel defaultSize={25}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Sidebar</span>
      </div>
    </ResizablePanel>
    <ResizableHandle withHandle />
    <ResizablePanel defaultSize={75}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Content</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
)
}

Vertical

Header
Content
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
export default function ResizableDemo() {
return (
  <ResizablePanelGroup
    direction="vertical"
    className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
  >
    <ResizablePanel defaultSize={25}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Header</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={75}>
      <div className="flex h-full items-center justify-center p-6">
        <span className="font-semibold">Content</span>
      </div>
    </ResizablePanel>
  </ResizablePanelGroup>
)
}

Nested

One
Two
Three
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable"
export default function ResizableDemo() {
return (
  <ResizablePanelGroup
    direction="horizontal"
    className="max-w-md rounded-lg border md:min-w-[450px]"
  >
    <ResizablePanel defaultSize={50}>
      <div className="flex h-[200px] items-center justify-center p-6">
        <span className="font-semibold">One</span>
      </div>
    </ResizablePanel>
    <ResizableHandle />
    <ResizablePanel defaultSize={50}>
      <ResizablePanelGroup direction="vertical">
        <ResizablePanel defaultSize={25}>
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Two</span>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={75}>
          <div className="flex h-full items-center justify-center p-6">
            <span className="font-semibold">Three</span>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </ResizablePanel>
  </ResizablePanelGroup>
)
}

Props

ResizablePanelGroup

Extends React.ComponentProps<typeof ResizablePrimitive.PanelGroup>

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | direction | "horizontal" \| "vertical" | "horizontal" | The direction of the panel group. | | onLayout | (sizes: number[]) => void | undefined | Callback invoked when the layout changes. |

ResizablePanel

Extends React.ComponentProps<typeof ResizablePrimitive.Panel>

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | defaultSize | number | 100 | The default size of the panel. | | minSize | number | 10 | The minimum size of the panel. | | maxSize | number | 100 | The maximum size of the panel. | | collapsible | boolean | false | Whether the panel can be collapsed. | | collapsedSize | number | 0 | The size of the panel when collapsed. |

ResizableHandle

Extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle>

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | withHandle | boolean | false | Whether to show a handle. |