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 AccordionItems with an AccordionTrigger (14px medium, a chevron that turns) and AccordionContent (14px).

Facts#

API#

TypeScript declarations emitted from src/components/ui/accordion.tsx (the module also exports its other parts).

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#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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#