shadcn.io is not affiliated with official shadcn/ui

Shadcn Resizable for React

Divides the interface into resizable sections.

PreviewCode

One

Two

Three

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/resizable.json

npx shadcn@latest add https://kit.dev/r/base/resizable.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/resizable.json

yarn shadcn@latest add https://kit.dev/r/base/resizable.json

Install the following dependencies:

bun add react-resizable-panels lucide-react

npm install react-resizable-panels lucide-react

pnpm add react-resizable-panels lucide-react

yarn add react-resizable-panels lucide-react

Copy and paste the following code into your project.

components/ui/resizable.tsx

"use client";

import { GripVerticalIcon } from "lucide-react";
import {
  Group,
  type GroupProps,
  Panel,
  type PanelProps,
  Separator,
  type SeparatorProps,
} from "react-resizable-panels";
import { cn } from "@/lib/utils";

export const Resizable = (props: GroupProps) => {
  const { className, ...rest } = props;

  return (
    <Group

Update the import paths to match your project setup.

Anatomy

Resizable
├── ResizablePanel
└── ResizableResizeTrigger
    └── ResizableResizeTriggerIndicator

Usage

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

<Resizable
  className="max-w-sm rounded-lg border"
  defaultSize={[50, 50]}
  panels={[
    { id: "1", minSize: 10 },
    { id: "2", minSize: 10 },
  ]}
>
  <ResizablePanel id="1">
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">One</span>
    </div>
  </ResizablePanel>
  <ResizableResizeTrigger id="1:2" withHandle />
  <ResizablePanel id="2">
    <Resizable
      defaultSize={[25, 75]}
      orientation="vertical"
      panels={[
        { id: "3", minSize: 10 },
        { id: "4", minSize: 10 },
      ]}
    >
      <ResizablePanel id="3">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Two</span>
        </div>
      </ResizablePanel>
      <ResizableResizeTrigger id="3:4" withHandle />
      <ResizablePanel id="4">
        <div className="flex h-full items-center justify-center p-6">
          <span className="font-semibold">Three</span>
        </div>
      </ResizablePanel>
    </Resizable>
  </ResizablePanel>
</Resizable>

Accessibility

Key	Description
`Enter`	Activate the focused item.
`ArrowUp`	Move up.
`ArrowDown`	Move down.
`ArrowLeft`	Move left.
`ArrowRight`	Move right.
`Home`	Go to the start.
`End`	Go to the end.
`F6`	Handle the F6 key.

Demos

Vertical

Use orientation="vertical" for vertical resizing.

PreviewCode

Handle

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

PreviewCode

Rtl

Right-to-left resizable. See the RTL configuration guide for document direction.

PreviewCode