# Accordion

> Vertically stacked expandable sections.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/accordion.json`

## Install

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@aspyn-io/kit";
```

### FAQ (single open)

```tsx
<Accordion type="single" collapsible>
  <AccordionItem value="billing">
    <AccordionTrigger>How does billing work?</AccordionTrigger>
    <AccordionContent>Per-seat, monthly or annual.</AccordionContent>
  </AccordionItem>
  …
</Accordion>
```

### Multiple open

```tsx
<Accordion type="multiple" defaultValue={["a", "b"]}>…</Accordion>
```

### Disabled item

Disable an item to keep it collapsed and unfocusable.

```tsx
<AccordionItem value="enterprise" disabled>
  <AccordionTrigger>Enterprise (coming soon)</AccordionTrigger>
  <AccordionContent>…</AccordionContent>
</AccordionItem>
```

### Card-wrapped

Nest an accordion inside a Card for a contained panel.

```tsx
<Card>
  <CardHeader>
    <CardTitle>Order details</CardTitle>
  </CardHeader>
  <CardContent>
    <Accordion type="single" collapsible>…</Accordion>
  </CardContent>
</Card>
```