Browse components
Accordion
Stacked disclosure sections with smooth auto-height animation, a springy chevron and full arrow/Home/End keyboard support.
Installation
npx shadcn@latest add @glint-ui/accordionFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/accordion.json
Usage
import { Accordion } from "@/components/ui/accordion";
<Accordion type="single" defaultValue={["shipping"]}>
<AccordionItem value="shipping">
<AccordionTrigger>How long does shipping take?</AccordionTrigger>
<AccordionContent>Orders ship within 2 business days.</AccordionContent>
</AccordionItem>
</Accordion>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Keep one item open, or allow many. |
| collapsible | boolean | true | Single mode: allow closing the open item. |
| defaultValue | string[] | — | Values of the items open on first render. |
| value | ReactNode | — | Controlled open values (string[]). |
| onValueChange | ReactNode | — | Called with the new open values. |
| className | string | — | Extra classes for the root element. |