A
Auralix UI

Accordion

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

Preview

Installation

bash
npx auralix-ui add accordion

Usage

FAQ Accordion

tsx
import { Accordion, AccordionItem } from "@/components/ui/Accordion";

<Accordion>
  <AccordionItem value="item-1" trigger="Is it accessible?">
    Yes. It adheres to the WAI-ARIA design pattern.
  </AccordionItem>
  <AccordionItem value="item-2" trigger="Is it styled?">
    Yes. It comes with default styles that matches the other components' aesthetic.
  </AccordionItem>
</Accordion>

Props

NameTypeDefaultDescription
childrenReactNode-AccordionItem components.

Variants

Simple
Boxed
Separated
TabsTracing Beam