Resizable

Accessible resizable panel groups and layouts.

One

Two

Installation

Add the resizable component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/resizable.json

Usage

tsx

import { Resizable } from "@/components/ui/resizable"

Examples

Default

One

Two

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"

<ResizablePanelGroup orientation="horizontal" className="h-40 w-72 border border-border">
  <ResizablePanel defaultSize={50}>One</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={50}>Two</ResizablePanel>
</ResizablePanelGroup>