Resizable

Accessible resizable panel groups and layouts with keyboard support.

shadcn/ui docs →

Preview

One
Two

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/resizable.json

Dependencies: react-resizable-panels

Usage

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

<ResizablePanelGroup direction="horizontal" className="max-w-md rounded-base border-2 border-border">
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-heading">One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-heading">Two</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>
0