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.

Collapsible Component - shadcn/ui Examples

About the shadcn/ui Collapsible Component

The Collapsible 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 collapsible` and copy it directly into your project.

Collapsible Component — Frequently Asked Questions

How do I control Collapsible open state with React state?

Use `open` and `onOpenChange` props: `<Collapsible open={isOpen} onOpenChange={setIsOpen}>`. This gives full control over when the collapsible opens or closes.

How is shadcn Collapsible different from Accordion?

Collapsible is a single expandable element for one piece of content. Accordion is a group of collapsibles where you can control how many can be open at once.

How do I animate the expand/collapse of shadcn Collapsible?

Use CSS transitions on the content. Add `data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up` classes to `<CollapsibleContent>`.