Components

Accordion

Vertically stacked, expandable sections that reveal one panel at a time (or many, if you allow it). Built on Radix Accordion. Each section shows a caret that rotates on open.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it tokenized?</AccordionTrigger>
    <AccordionContent>Yes. All Yuno tokens.</AccordionContent>
  </AccordionItem>
</Accordion>

When to use

  • Long-form FAQs or grouped settings that don't all fit on screen.
  • Collapsible groups of table columns or filters.

When not to use

  • Structural navigation — use tabs or a sidebar.
  • For a single toggle — use Collapsible directly.

Usage

Do
  • Keep triggers short and scannable.
  • Give each section a clear heading.
Don't
  • Don't nest accordions inside accordions.
  • Don't animate too aggressively — subtle collapse works better.