Sections

Components

Utilities

Forms

Hooks

useIsMobile

Resizable

Copy Markdown

Divides the interface into resizable sections.

Docs API

PreviewCode

One

Two

Three

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/resizable

Anatomy#

Resizable
├── ResizablePanel
└── ResizableResizeTrigger

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).

PreviewCode

Left

Right

Vertical#

Set orientation="vertical" to stack panels vertically.

PreviewCode

Top

Bottom

Examples#

Handle#

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

PreviewCode

Panel 1

Panel 2

Min / Max Size#

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

PreviewCode

Sidebar

Content

Multiple Panels#

PreviewCode

Left

Center

Right

API Reference#

Resizable#

Root component. Manages resizable panel layout.

Prop	Type	Default
`panels`	`PanelData[]`	-
`defaultSize`	`number[]`	-
`size`	`number[]`	-
`orientation`	`"horizontal"	"vertical"`
`keyboardResizeBy`	`number`	-
`onResize`	`(details: ResizeDetails) => void`	-
`onResizeStart`	`() => void`	-
`onResizeEnd`	`(details: ResizeEndDetails) => void`	-
`onCollapse`	`(details: ExpandCollapseDetails) => void`	-
`onExpand`	`(details: ExpandCollapseDetails) => void`	-
`className`	`string`	-

ResizablePanel#

A resizable panel. Multiple panels share the available space.

Prop	Type	Default
`id`	`string`	-
`asChild`	`boolean`	`false`
`className`	`string`	-

ResizableResizeTrigger#

Draggable handle between panels for resizing.

Prop	Type	Default
`id`	`${string}:${string}`	-
`withHandle`	`boolean`	`false`
`disabled`	`boolean`	-
`asChild`	`boolean`	`false`
`className`	`string`	-

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

[

Rating ](/docs/components/rating)[

Scroll Area ](/docs/components/scroll-area)

On This Page

Installation Anatomy Usage Orientation Horizontal Vertical Examples Handle Min / Max Size Multiple Panels API Reference Resizable ResizablePanel ResizableResizeTrigger