Skip to content

Accordion

Sections opened by their headings. One open at a time by default; multiple allows more.

Sourcecomponents/accordion.tsx

One at a time

Tokens, components, the rules file and the agent snippets.

Multiple, inside a card

Notifications

Usage

Accordion usage
import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "@/components/accordion";
export function AccordionUsage({ faqs }: { faqs: { question: string; answer: string }[] }) {  return (    <Accordion>      {faqs.map((faq) => (        <AccordionItem key={faq.question} value={faq.question}>          <AccordionTrigger headingLevel={3}>{faq.question}</AccordionTrigger>          <AccordionPanel>{faq.answer}</AccordionPanel>        </AccordionItem>      ))}    </Accordion>  );}

When to use

Use when

Several sections people open selectively: FAQs, settings groups. Set headingLevel to fit the page outline

Don’t use when

Content everyone needs (keep it on the page); one section (use Collapsible)