Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Resizable Component - shadcn/ui Examples

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.