# Accordion

> Stacked sections that expand one at a time (or several); height animates in 250ms on the smooth-out ease (`--acc-*`).

## Facts

- **Product**: Max
- **Family**: Layout
- **Global**: `window.DigitalCrew.Accordion`
- **Source**: `max-agent: src/components/ui/accordion.tsx`
- **Import in the app**: `import { Accordion } from "@/components/ui/accordion";`
- **Live preview**: /design/components/accordion/preview.html
- **Page**: /design/components/accordion

## Guidelines

**Use it for** long settings and FAQs where people scan headings first. Max's campaign setup collapses each section to a one-line summary ("Mon–Fri · 09:00–17:00 · Europe/Paris") with a status icon; a warning icon appears only for something that blocks launch.

**What you provide**: `type` (`single` with `collapsible`, or `multiple`), `defaultValue`, and `AccordionItem`s with an `AccordionTrigger` (14px medium, a chevron that turns) and `AccordionContent` (14px).

## API

```ts
declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): any;
declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): any;
declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): any;
declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): any;
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.Accordion, { type: "single", collapsible: true, defaultValue: "a", className: "max-w-xl" },
    h(DC.AccordionItem, { value: "a" },
      h(DC.AccordionTrigger, null, "Schedule"),
      h(DC.AccordionContent, null, "Mon–Fri · 09:00–17:00 · Europe/Paris. Steps skip public holidays in the prospect's country.")),
    h(DC.AccordionItem, { value: "b" },
      h(DC.AccordionTrigger, null, "Senders"),
      h(DC.AccordionContent, null, "claire@northwind.io and 2 warmed mailboxes.")),
    h(DC.AccordionItem, { value: "c" },
      h(DC.AccordionTrigger, null, "Stop conditions"),
      h(DC.AccordionContent, null, "Stop on reply, on meeting booked, and on an out-of-office longer than a week.")));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Layout

- [Card](/design/components/card.md): The raised surface for grouped content: `card` fill, `border`, `radius-xl` (14px), `shadow-sm`, 24px padding and gap.
- [Collapsible](/design/components/collapsible.md): Shows and hides one region under its trigger (Radix Collapsible); animates with the accordion tokens.
- [ContentSection](/design/components/content-section.md): The settings-page section: a title, a one-line description, a separator, then a scrolling body.
- [DataTableToolbar](/design/components/data-table-toolbar.md): The toolbar of Max's data-table kit (search, faceted filters, Reset and the View columns menu) and how the kit's pieces fit around a `Table`.
- [Main](/design/components/main.md): The page body of Max's app shell: a `<main>` with the standard page padding and, by default, a centred 7xl width.
- [PanelSplitter](/design/components/panel-splitter.md): The draggable seam between two side-by-side panels; every split view in Max uses it, so one gesture works everywhere.
- [ScrollArea](/design/components/scroll-area.md): A scroll container with thin themed scrollbars (10px track, `border`-coloured thumb) that appear on hover.
- [Separator](/design/components/separator.md): A 1px `border` hairline, horizontal or vertical (Radix Separator, decorative by default).
- [Table](/design/components/table.md): The data table primitive: 14px rows with `border` dividers, 40px header cells in medium weight, `muted` at 50% on hover and selection.