MatrixUI Logo

Accordion

A vertically stacked set of interactive headings that expand to reveal content.

Preview

Installation

npm install @matrix-ui/components

Usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@matrix-ui/components'

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Click to expand</AccordionTrigger>
    <AccordionContent>
      Content goes here
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Multiple