Components
Accordion
Accordion flattens shadcn's Accordion compound components into a single items-driven component: each item describes its trigger and panel content, instead of hand-writing nested AccordionItem / AccordionTrigger / AccordionContent structures.
Orders ship within 1–2 business days and arrive in 3–5 days.
Multiple panels stay open at once with the multiple prop.
Push to main and CI publishes the registry automatically.
Installation
With the @easy-shadcn namespace configured:
pnpm dlx shadcn@latest add @easy-shadcn/accordionOr install via the full URL (zero configuration):
pnpm dlx shadcn@latest add https://easy-shadcn.vercel.app/r/accordion.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionItem[] | - | Item definitions — see the table below. An empty array renders an empty accordion. |
value | string[] | - | The open item values. Use for the controlled mode. |
defaultValue | string[] | - | The initially open item values. Use for the uncontrolled mode. |
onValueChange | (value: string[], eventDetails) => void | - | Called when an item is expanded or collapsed. |
multiple | boolean | false | Allows multiple panels to stay open at the same time. |
disabled | boolean | false | Disables every item. |
keepMounted | boolean | false | Keeps closed panels mounted (hidden) instead of unmounting them. |
itemClassName | ClassValue | - | Class override applied to every AccordionItem. |
triggerClassName | ClassValue | - | Class override applied to every AccordionTrigger. |
contentClassName | ClassValue | - | Class override applied to every AccordionContent. |
All other props (className, orientation, loopFocus, etc.) are forwarded to the underlying Accordion root.
AccordionItem
| Field | Type | Description |
|---|---|---|
value | string | Unique identifier of the item. |
trigger | ReactNode | Header content — plain text or e.g. icon + text. |
content | ReactNode | Panel content. |
disabled | boolean | Disables this item. |
itemClassName | ClassValue | Per-item class, merged after the root-level itemClassName. |
triggerClassName | ClassValue | Per-item trigger class, merged after the root-level triggerClassName. |
contentClassName | ClassValue | Per-item content class, merged after the root-level contentClassName. |
Notes
value/defaultValueare arrays because Base UI's accordion is multi-open at heart. In single mode (multipleomitted) the array holds at most one value.value/defaultValue/onValueChangeare narrowed tostring[]— the Base UI primitive acceptsany[], which silently swallows typos.- Use
keepMountedwhen a panel holds expensive state (forms, iframes) that should survive collapsing. itemsmust be homogeneous. For heterogeneous triggers or panels (custom chevrons, non-uniform layouts), compose thecomponents/ui/accordionprimitives directly instead.