ComponentClient component

Resizable

Accessible panel layouts users can resize with pointer or keyboard.

Installation

Preview

Workspace

Components

Blocks

Themes

Drag the handle

Resize both panels with pointer or keyboard.

Usage

tsx

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

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={35}>Navigation</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel>Content</ResizablePanel>
</ResizablePanelGroup>

API reference

Prop	Type	Default	Description
`direction`	`"horizontal" \| "vertical"`	`—`	Required panel group direction.
`withHandle`	`boolean`	`false`	Displays a visible grip on the separator.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.