Component

Accordion

Single or multiple expanding sections with a fade and layout transition.

Accordion rendered on iOS, dark mode — iPhone, zinc preset. Captured from the example app.

npx @eoria/cli add accordion

Usage

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'

<Accordion defaultValue="shipping">
  <AccordionItem value="shipping">
    <AccordionTrigger>How long does shipping take?</AccordionTrigger>
    <AccordionContent>Two to five business days.</AccordionContent>
  </AccordionItem>
</Accordion>

<Accordion type="multiple" variant="contained" value={open} onValueChange={setOpen}>…</Accordion>

Props

Prop	Single	Multiple
`type`	`'single'` (default)	`'multiple'`
`value`	`string \| undefined`	`string[]`
`onValueChange`	`(value: string \| undefined) => void`	`(value: string[]) => void`
`collapsible`	close the open item on tap, default true	n/a

variant is default (hairline between items) or contained (a surface tile). The group takes disabled to lock every item. Items take value and disabled.

Notes

The trigger reports expanded. Content mounts only while open, fades in over 150 ms, and items shift with a layout transition. Views below the accordion do not animate unless they also carry layout={LinearTransition}.

Source

registry/ui/accordion.tsx