Accordion Expandable sections that reveal content one at a time.
How does the subscription work?
What payment methods are supported?
Where can I find my invoices?
import {
Accordion,
AccordionItem,
AccordionPanel,
AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion type = "single" collapsible >
<AccordionItem value ="item-1" >
<AccordionTrigger> Question </AccordionTrigger>
<AccordionPanel> Answer </AccordionPanel>
</AccordionItem>
</Accordion> Installation 1 pnpm dlx mono add accordion
Usage 1 import {
2 Accordion,
3 AccordionItem,
4 AccordionPanel,
5 AccordionTrigger,
6 } from "@/components/ui/accordion" <Accordion>
<AccordionItem value ="item-1" >
<AccordionTrigger> Is it accessible? </AccordionTrigger>
<AccordionPanel>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionPanel>
</AccordionItem>
</Accordion> Examples With Icon Add Carbon icons to accordion triggers for visual context.
Two-factor authentication
Password and security settings
Connected devices and active sessions
<AccordionItem value ="item-1" >
<AccordionTrigger icon ={<IconTwoFactor />}>
Two-factor authentication
</AccordionTrigger>
<AccordionPanel> Enable 2FA... </AccordionPanel>
</AccordionItem> Borderless No dividers between items.
How does the subscription work?
What payment methods are supported?
Where can I find my invoices?
<Accordion variant ="borderless" > ... Grouped All items wrapped in a single bordered container.
Shipping options and delivery
Payment methods on delivery
How to return an item within 14 days
<Accordion variant ="grouped" > ... Cards Each item as an individual card.
14-day money-back guarantee
99.9% uptime service guarantee
24/7 priority support for Pro users
<Accordion variant ="cards" > ... Multiple Multiple items can be open simultaneously.
Step 1: Create your account
Step 2: Set up your profile
<Accordion type ="multiple" > ... Anatomy Accordion - Root container that manages open/close stateAccordionItem - Individual collapsible sectionAccordionTrigger - Clickable header that toggles visibilityAccordionPanel - Expandable content area Props Accordion Prop Type Default variant 'default' | 'borderless' | 'grouped' | 'cards' 'default' type 'single' | 'multiple' required collapsible boolean false value string | string[] undefined defaultValue string | string[] undefined onValueChange (value: string | string[]) => void undefined
AccordionItem Prop Type Default value string required disabled boolean false
AccordionTrigger Prop Type Default icon ReactNode undefined
AccordionPanel Prop Type Default className string undefined forceMount boolean false