Accordion
A set of collapsible panels, one at a time or several at once.
Usage is metered per token and invoiced monthly. Switching plans takes effect at the start of the next billing cycle.
Install
pnpm dlx shadcn@latest add @namche/accordionUsage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
<Accordion defaultValue={['billing']}>
<AccordionItem value="billing">
<AccordionTrigger>Billing</AccordionTrigger>
<AccordionContent>Usage is metered per token…</AccordionContent>
</AccordionItem>
</Accordion>Each AccordionItem needs a unique value; Accordion tracks the open
item(s) by value through defaultValue (uncontrolled) or value +
onValueChange (controlled) — both take an array, since multiple allows
more than one panel open at a time. Built on Base UI's Accordion, so the
panel height animates through a CSS custom property rather than height: auto.