Docs
Components
Resizable

Resizable

Accessible resizable panel groups and layouts with keyboard support.

Docs

Preview

Code

One

Two

Three

About

The Resizable component is built using the react-resizable-panels library.

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/resizable

Anatomy

import { Resizable } from "~/components/ui/resizable";

<Resizable.Root orientation="horizontal">
  <Resizable.Panel />
  <Resizable.Separator />
  <Resizable.Panel />
</Resizable.Root>;

Examples

Vertical

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

Preview

Code

Header

Content

<Resizable.Root orientation="vertical">
  <Resizable.Panel />
  <Resizable.Separator />
  <Resizable.Panel />
</Resizable.Root>

Handle

Add <Resizable.Handle> inside <Resizable.Separator> to show a visible drag handle.

Preview

Code

Sidebar

Content

<Resizable.Root>
  <Resizable.Panel />
  <Resizable.Separator>
    <Resizable.Handle />
  </Resizable.Separator>
  <Resizable.Panel />
</Resizable.Root>

API Reference

Resizable.Root

Prop	Type	Default
`orientation`	`enum`	`"horizontal"`
`className`	`string`

Resizable.Panel

Prop	Type	Default
`defaultSize`	`number \| string`
`minSize`	`number \| string`
`maxSize`	`number \| string`
`collapsible`	`boolean`
`collapsedSize`	`number \| string`
`onResize`	`function`

Resizable.Separator

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Resizable.Handle

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Radio Group Scroll Area

On This Page

About
Installation
Anatomy
Examples
Vertical
Handle
API Reference
Resizable.Root
Resizable.Panel
Resizable.Separator
Resizable.Handle

Contribute