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>

Bordered Variant

tsx
<Accordion variant="bordered" type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Security Clearance</AccordionTrigger>
    <AccordionContent>Level 4 authorized access verified.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Encryption Protocols</AccordionTrigger>
    <AccordionContent>AES-256-GCM + Post-Quantum Lattice Key Exchange.</AccordionContent>
  </AccordionItem>
</Accordion>

Glass Variant

tsx
<div className="p-6 rounded-2xl border border-white/10 bg-[#060913] bg-[url('/textures/circuit-board.svg')] bg-repeat">
  <Accordion variant="glass" type="multiple" className="w-full">
    <AccordionItem value="item-1">
      <AccordionTrigger>Encrypted Data Stream</AccordionTrigger>
      <AccordionContent>Decryption in progress... Quantum handshake completed.</AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2">
      <AccordionTrigger>Network Telemetry Logs</AccordionTrigger>
      <AccordionContent>Accessing secure node history. 0 anomalies detected.</AccordionContent>
    </AccordionItem>
  </Accordion>
</div>

API Reference

PROPERTIES (3)← swipe to inspect →
PropertyDescriptionTypeDefault
variant
The visual style variant applied to all child items.
"default" | "neon" | "bordered" | "glass"
"default"
type
Determines whether one or multiple items can be opened.
"single" | "multiple"
-
collapsible
When type is "single", allows closing content when clicking trigger for an open item.
boolean
false