Accordion

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

Preview & Interactive Laboratory

Standard Variant

Premium Glass Variant

Usage & Implementation

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"

<Accordion type="single" collapsible variant="glass">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>
React / Tailwind

Granular Customization

1

Container

The main accordion wrapper.

className={`className`}
2

Trigger

The header button that toggles visibility.

className={`classNames={{ trigger: '...' }}`}
3

Variants

Supports standard and glass variants.

className={`variant='glass'`}

API Reference (Props)

PropTypeDefaultDescription
type'single' | 'multiple''single'Whether one or multiple items can be open.
collapsiblebooleanfalseWhether an item can be closed once opened.
variant'default' | 'glass' | 'outline''default'The visual style of the accordion.