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.

Accordion Component - shadcn/ui Examples

About the shadcn/ui Accordion Component

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

Accordion Component — Frequently Asked Questions

How do I open multiple accordion items at once?

Set `type="multiple"` on `<Accordion>` and use an array for `value`. With `type="single"`, only one panel can be open at a time.

How do I control an accordion programmatically?

Use `value` and `onValueChange` props: `<Accordion type="single" value={open} onValueChange={setOpen}>`. The value is the AccordionItem's `value` prop.

Can I disable individual accordion items?

Yes, add `disabled` to `<AccordionItem>`: `<AccordionItem value="item-1" disabled>`. The trigger will appear dimmed and won't respond to clicks.