Accordion

Data Display

A vertically stacked set of collapsible sections. Use accordions to organize content into expandable panels, saving space while keeping content accessible.

Import

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

Usage

Basic Accordion

Single item open at a time

Sonance provides hidden audio solutions for residential, professional, and marine environments. Founded in 1983, we pioneered the world's first in-wall loudspeaker.

FAQ Section

Accordion used for frequently asked questions

API Reference

PropTypeDefaultDescription
type"single" | "multiple""single"Whether one or multiple items can be open
defaultValuestring | string[]Initial open item(s)
collapsiblebooleantrueWhether items can be fully collapsed

Related Components