Deluxe UI

Accordion

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

Radix UI

Usage

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@sihaxito/deluxe-ui";
<Accordion type="single">
  <AccordionItem>
    <AccordionTrigger value="element-1">Element 1</AccordionTrigger>
    <AccordionContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Multiple expanded

Example accordion/multiple not found.

Controlled state

Example accordion/controlled not found.

Useful links

ManualAlert dialog