Resizable
LayoutAccessible resizable panel groups and layouts with keyboard support.
Import
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";Usage
Interactive Resizable Layout
A responsive layout with resizable panels. On desktop/tablet, panels are horizontal with a sidebar and main content area. On mobile, panels stack vertically for better usability.
API Reference
direction"horizontal""horizontal" | "vertical"The layout direction of the panels
defaultSize—numberThe default size of the panel in percentage
minSize—numberThe minimum size of the panel in percentage
maxSize—numberThe maximum size of the panel in percentage
withHandle—booleanWhether to show a grip handle
| Prop | Type | Default | Description |
|---|---|---|---|
direction | "horizontal" | "vertical" | "horizontal" | The layout direction of the panels |
defaultSize | number | — | The default size of the panel in percentage |
minSize | number | — | The minimum size of the panel in percentage |
maxSize | number | — | The maximum size of the panel in percentage |
withHandle | boolean | — | Whether to show a grip handle |