accordion/introduction

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

Quick Demo

Quick Start

This component uses the anatomy:


  <Accordion>
    <AccordionItem>
      <AccordionTrigger />
      <AccordionContent />
    </AccordionItem>
    {/* more AccordionItem ... */}
  </Accordion>

The most important props are type and collapsible. They're tricky to explain with words, so the best way to understand is to try the demos:

You can make specific items non-interactive (disabled), or disable the entire component:

Let's! For more on its family components to use, and more demos on showing how versatile this component can be, check the API reference page.