Skip to content
Jaringan

Components · shadcn accordion

Accordion

The FAQ pattern: rows separated by hairlines, the question in type-heading-md with a rotating caret, the answer in muted body text at most 66ch wide.

FAQ

Preview

Show code
<Accordion>
  <AccordionItem value="members">
    <AccordionTrigger>Who can become a member?</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

Rules

  • Height animates over 200ms where supported; under reduced motion it opens instantly.
  • The FAQ page uses the narrow column, with category filter chips above the accordion.
  • Questions are written the way people ask them, in the page language.