## Fold Accordion (S—013)

A numbered FAQ accordion that animates real content height with CSS grid. No measuring, no jank.

- URL: https://sundaeui.dev/components/fold-accordion
- Category: UI components · Art direction: Understated
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/fold-accordion.json`
- Tags: tailwind, animated, accordion, react, faq, disclosure, landing-page

An understated accordion for FAQs and specification lists. Questions carry small tabular numbers in a left gutter, and the plus mark folds its vertical stroke away to become a minus.
Panels animate grid-template-rows from 0fr to 1fr, so the browser interpolates the real content height. Nothing is measured in JavaScript, and it works with dynamic content, images and text reflow. The answer slides up slightly as it appears, which feels like unfolding rather than expanding.
Collapsed panels are inert, so their links can’t be tabbed into while hidden. Open one item at a time, or several with multiple.

### Usage

```tsx
import { FoldAccordion } from '@/components/sundae/fold-accordion'

<FoldAccordion
  defaultOpen={[0]}
  items={[
    { question: 'Can I use the free components commercially?', answer: 'Yes…' },
    { question: 'Do I need Tailwind?', answer: <>Only for assets marked <strong>Tailwind</strong>.</> },
  ]}
/>
```

### Props

- `items` (`FoldItem[]`, required): { question, answer } pairs. answer accepts any ReactNode.
- `multiple` (`boolean`): Allow more than one open panel.
- `defaultOpen` (`number[]`, default `[]`): Indexes open on first render.
- `headingLevel` (`2 | 3 | 4`, default `3`): Heading element that wraps each trigger, so the page outline stays correct.

### Accessibility

- Follows the WAI-ARIA accordion pattern: button triggers inside headings, aria-expanded, aria-controls and labelled regions.
- Collapsed panels are inert, so hidden links cannot receive focus.
- motion-reduce disables the height transition.