Accordion

Stable

A vertically stacked set of interactive headings that each reveal a section of content.

Examples

Default Variant

tsx
<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>Yes. It comes with default styles that matches the other components' aesthetic.</AccordionContent>
  </AccordionItem>
</Accordion>

Neon Variant

tsx
<Accordion variant="neon" type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>System Override</AccordionTrigger>
    <AccordionContent>Executing root commands...</AccordionContent>
  </AccordionItem>
</Accordion>

Glass Variant

tsx
<Accordion variant="glass" type="multiple" className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Encrypted Data</AccordionTrigger>
    <AccordionContent>Decryption in progress...</AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

PropertyDescriptionTypeDefault
variantThe visual style variant applied to all child items."default" | "neon" | "bordered" | "glass""default"
typeDetermines whether one or multiple items can be opened."single" | "multiple"-
collapsibleWhen type is "single", allows closing content when clicking trigger for an open item.booleanfalse