import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTitle,
AccordionTrigger,
} from "@/components/ui/accordion"Accordion
An accordion component with many variations and styles.
Accordion API Reference
Playground
Customize the Accordion properties to see different variations.
Yes! Our platform is designed with simplicity in mind. We offer a comprehensive onboarding process and detailed guides to help you get started quickly, regardless of your previous experience.
Customize
Installation
pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/accordion.jsonBasic Usage
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>
<AccordionTitle>Title 1</AccordionTitle>
</AccordionTrigger>
<AccordionContent>
Content 1
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>
<AccordionTitle>Title 2</AccordionTitle>
</AccordionTrigger>
<AccordionContent>
Content 2
</AccordionContent>
</AccordionItem>
</Accordion>Examples
Product Features (Separated & Plus/Minus Icon)
Use the separated variant with the fill style for a visually distinct look, perfect for highlighting key product features. This example also uses the plus-minus trigger icon.
Settings Panel (Contained & Left Trigger)
The contained variant is ideal for grouping related settings. This example shows a fill style and moves the chevron trigger to the left.
Interactive Tutorial Steps (Tabs Style)
The tabs variant can create a step-by-step guide or a tab-like interface where only one item is prominently displayed when open. This example uses styleVariant="outline".
The tabs variant can create a step-by-step guide or a tab-like interface where only one item is prominently displayed when open. This example uses styleVariant="outline".
Multi-Select Filters (Multiple Open)
This example showcases the multiple type, which lets several sections remain open simultaneously —ideal for filter menus.
Always Open Section (Using collapsible={false})
If you need a section that is always open by default and cannot be closed by the user, you can set collapsible={false} on the AccordionTrigger component. If only one specific item should always be open, you should also set the defaultValue to the value of that item.
This content is vital and should always be visible to the user. Setting
collapsible= and type="multiple" ensures it cannot be closed.collapsible={false} on the root means no items can be collapsed once opened if type="single".
Accordion Props
| Prop | Type | Default |
|---|---|---|
variant | enum | "default" |
styleVariant | enum | "outline" |
trigger | enum | "chevron" |
triggerPosition | enum | "right" |
type* | enum | "single" |
collapsible | boolean | true |