Navigation

Accordion

Collapsible content sections.

Import

tsx

import { Accordion } from "@cronus-ui/ui";

bash

npx cronus-ui add accordion

Examples

FAQ

Single-open, collapsible disclosure panels for FAQs and dense content.

tsx

<Accordion type="single" collapsible className="w-full max-w-md">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It follows the WAI-ARIA disclosure pattern and is fully keyboard
      navigable.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it themeable?</AccordionTrigger>
    <AccordionContent>
      Absolutely. Every color, radius, and shadow flows from semantic design
      tokens.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes — content expands and collapses with a smooth height transition.
    </AccordionContent>
  </AccordionItem>
</Accordion>