About the shadcn/ui Resizable Component
The Resizable component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add resizable` and copy it directly into your project.
Resizable Component — Frequently Asked Questions
How do I save the panel size in a shadcn Resizable layout?
Use the `onLayout` callback on `<ResizablePanelGroup>`: `onLayout={(sizes) => localStorage.setItem('layout', JSON.stringify(sizes))}`. Restore with `defaultSize` on mount.
How do I make a panel collapsible in shadcn Resizable?
Add `collapsible` and `collapsedSize={0}` to `<ResizablePanel>`. Use `ref` to call `panel.collapse()` and `panel.expand()` programmatically.
How do I set minimum and maximum panel sizes?
Use `minSize={20}` and `maxSize={60}` props on `<ResizablePanel>`. Values are percentages of the total container size.