DUI
⌘K

Components / Layout

Resizable

Draggable panel container for layouts.

Preview

Left panel
Main content
1import { Resizable, ResizableHandle, ResizablePanel } from "@/components/ui/resizable"2
3export function ResizableDemo() {4  return (5    <Resizable direction="horizontal" className="h-72">6      <ResizablePanel defaultSize={200} minSize={72}>7        <div className="p-4">Sidebar</div>8      </ResizablePanel>9      <ResizableHandle />10      <ResizablePanel>11        <div className="p-4">Main content</div>12      </ResizablePanel>13    </Resizable>14  )15}

vertical

The vertical style of this component.

Top panel
Bottom panel
1import { Resizable, ResizableHandle, ResizablePanel } from "@/components/ui/resizable"2
3export function ResizableDemo() {4  return (5    <Resizable direction="vertical" className="h-72">6      <ResizablePanel defaultSize={96} minSize={72}>7        <div className="p-4">Top panel</div>8      </ResizablePanel>9      <ResizableHandle />10      <ResizablePanel>11        <div className="p-4">Main content</div>12      </ResizablePanel>13    </Resizable>14  )15}

nested

The nested style of this component.

Left panel
Grid workspace
Bottom panel
1import { Resizable, ResizableHandle, ResizablePanel } from "@/components/ui/resizable"2
3export function ResizableDemo() {4  return (5    <Resizable direction="horizontal" className="h-72">6      <ResizablePanel defaultSize={200} minSize={72}>7        <div className="p-4">Sidebar</div>8      </ResizablePanel>9      <ResizableHandle />10      <ResizablePanel>11        <div className="p-4">Main content</div>12      </ResizablePanel>13    </Resizable>14  )15}

framed

The framed style of this component.

Left panel
Main content
1import { Resizable, ResizableHandle, ResizablePanel } from "@/components/ui/resizable"2
3export function ResizableDemo() {4  return (5    <Resizable direction="horizontal" variant="framed" className="h-72">6      <ResizablePanel defaultSize={200} minSize={72}>7        <div className="p-4">Sidebar</div>8      </ResizablePanel>9      <ResizableHandle />10      <ResizablePanel>11        <div className="p-4">Main content</div>12      </ResizablePanel>13    </Resizable>14  )15}

Installation

Add the source directly to your project with the shadcn CLI.

npx shadcn@latest add qentrah/DUI/resizable

Usage

Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.

Navigation