Resizable

Accessible resizable panel groups and layouts with keyboard support.

1. Import

Import the resizable components from the design system.

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

2. Props

Resizable component props.

Prop	Type	Default
direction	"horizontal" \| "vertical"	"horizontal"
withHandle	boolean	false
className	string	--

3. Usages

Common resizable panel patterns.

One

Two

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/design-system/components/ui/resizable";

export function Example() {
  return (
    <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
      <ResizablePanel defaultSize={50}>
        <div className="flex h-32 items-center justify-center p-6">
          <span className="font-semibold">One</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-32 items-center justify-center p-6">
          <span className="font-semibold">Two</span>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}