Resizable

Component 34

About

Accessible resizable panel groups and layouts.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Resizable to your project and fits it to your theme.

Code

How Resizable is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function DemoOne() {
  return(
    <>
      <div className="max-w-md w-full mx-auto">
        <ResizablePanelGroup
          direction="horizontal"
          className="min-h-[300px] max-w-lg rounded-lg border"
        >
          <ResizablePanel defaultSize={25} minSize={20} border="right">
            <div className="flex h-full items-center justify-center p-4">
              <span className="font-semibold text-sm">Sidebar</span>
            </div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel defaultSize={75} border="top">
            <ResizablePanelGroup direction="vertical">
              <ResizablePanel defaultSize={60} minSize={40} border="bottom">
                <div className="flex h-full items-center justify-center p-4">
                  <span className="font-semibold text-sm">Main Content</span>
                </div>
              </ResizablePanel>
              <ResizableHandle />
              <ResizablePanel defaultSize={40} minSize={20}>
                <div className="flex h-full items-center justify-center p-4">
                  <span className="font-semibold text-sm">Footer</span>
                </div>
              </ResizablePanel>
            </ResizablePanelGroup>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
    </>
  );
}