Components
Loading preview...
Accessible resizable panel groups and layouts.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/resizableimport { 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>
</>
);
}