Resizable

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/resizable.json

Usage

import {
  Resizable,
  ResizablePanel,
  ResizableResizeTrigger,
} from "@/components/ui/resizable";

<Resizable>
  <ResizablePanel id="1" />
  <ResizableResizeTrigger id="1:2" />
  <ResizablePanel id="2" />
</Resizable>

Orientation

Use the orientation prop to control the orientation of the resizable panels.

Horizontal

Set orientation="horizontal" to place panels side by side (default).

Vertical

Set orientation="vertical" to stack panels vertically.

Examples

Handle

Use the withHandle prop on <ResizableResizeTrigger /> to show a visible grip handle for resizing.

Min / Max Size

Use panels with minSize and maxSize to constrain how small or large a panel can be resized.

Multiple Panels

API Reference

Resizable

Root component. Manages resizable panel layout.

ResizablePanel

A resizable panel. Multiple panels share the available space.

ResizableResizeTrigger

Draggable handle between panels for resizing.

For a complete list of props, see the Ark UI documentation.