Layout UI

Resizable

Drag-to-resize panels built on react-resizable-panels. Exports ResizablePanelGroup (orientation, layout), ResizablePanel (defaultSize, minSize, collapsible), and ResizableHandle (optional withHandle grip icon).

Preview

Sidebar

Content

Installation

bash
npx shadcn@latest add @layout/resizable

Usage

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

Examples

With handle grip

Navigation

Main panel

Nested panels

Left

Top right

Bottom right

Guidelines for AI agents

Set orientation on ResizablePanelGroup (horizontal or vertical). Each ResizablePanel takes a defaultSize as a percentage (0-100); all panels in a group must sum to 100. Add withHandle to ResizableHandle to show the grip icon. Nest ResizablePanelGroups inside ResizablePanel for complex layouts.

Never

  • Neverset flex or width directly on ResizablePanel; sizing is controlled by defaultSize percentage
  • Neveromit defaultSize on panels; the group will not know how to distribute space
  • Neveruse ResizableHandle outside ResizablePanelGroup; it requires the panel group context
  • Neverhardcode the grip colour; it derives from bg-border and border-border tokens

Tokens consumed

--layout-border--layout-ring--layout-radius