Accordion
Collapsible sections built on Base UI's Accordion, with hairline row separators, an animated height transition, and a chevron that rotates on open. Panels stay mounted (keepMounted) so their content remains crawlable when collapsed.
$npx shadcn add @patchui/accordion
A React component library built on Base UI primitives with Tailwind CSS v4 and a design-token system.
Yes. Tokens are defined for both light and dark via the `dark` class, with no JavaScript theme switching required.
Yes. Accordion allows multiple open panels by default; pass a single value to enforce one-at-a-time behavior.
Usage
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionPanel,
} from "@patchui/react";
<Accordion defaultValue={["item-0"]}>
<AccordionItem value="item-0">
<AccordionTrigger>Question?</AccordionTrigger>
<AccordionPanel>Answer.</AccordionPanel>
</AccordionItem>
</Accordion>Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string[] | [] | Values of the items expanded by default (uncontrolled). |
| value | string[] | - | Controlled set of expanded item values. |
| onValueChange | (value: string[]) => void | - | Callback fired when the expanded set changes. |
| openMultiple | boolean | true | Whether more than one panel can be open at once. |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Unique identifier for the item, used to track open state. |
Notes
- Keyboard: Triggers are focusable and toggle on Enter/Space, with the standard focus outline.
- SEO: Panels render with
keepMounted, so collapsed content stays in the DOM (height:0) and remains indexable. - Single vs multiple: Pass a single value (and
openMultiple={false}if desired) to enforce one-open-at-a-time.