Components
Accordion
A stack of sections that open in place, one at a time or several: questions and answers, groups of settings, long details. Each section is a row with its title and a caret that turns, and a divider under it.
Preview
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
<Accordion defaultValue="refunds" className="max-w-md">
<AccordionItem value="refunds">
<AccordionTrigger>Can I get a refund?</AccordionTrigger>
<AccordionContent>Yes, within 14 days of your purchase.</AccordionContent>
</AccordionItem>
<AccordionItem value="seats">
<AccordionTrigger>Can I add more people later?</AccordionTrigger>
<AccordionContent>Add or remove seats at any time from Billing.</AccordionContent>
</AccordionItem>
<AccordionItem value="cancel">
<AccordionTrigger>What happens when I cancel?</AccordionTrigger>
<AccordionContent>Your projects stay readable for 30 days.</AccordionContent>
</AccordionItem>
</Accordion>Usage
When to use
- Long pages of questions and answers, or groups of settings the user opens one at a time.
- Details most people skip, kept on the page for those who need them.
When not to use
- Switching between views of the same content. Use Tabs.
- Content everyone needs. Keep it on the page, open.
- A section inside another accordion section.
Examples
Questions
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
<Accordion defaultValue="refunds" className="max-w-md">
<AccordionItem value="refunds">
<AccordionTrigger>Can I get a refund?</AccordionTrigger>
<AccordionContent>Yes, within 14 days of your purchase.</AccordionContent>
</AccordionItem>
<AccordionItem value="seats">
<AccordionTrigger>Can I add more people later?</AccordionTrigger>
<AccordionContent>Add or remove seats at any time from Billing.</AccordionContent>
</AccordionItem>
</Accordion>Several open
type multiple keeps every section the user opened.
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
<Accordion type="multiple" headingLevel={4} className="max-w-md">
<AccordionItem value="email">
<AccordionTrigger>Email</AccordionTrigger>
<AccordionContent>Mentions, replies and weekly digests.</AccordionContent>
</AccordionItem>
<AccordionItem value="push">
<AccordionTrigger>Push</AccordionTrigger>
<AccordionContent>Mentions and replies only.</AccordionContent>
</AccordionItem>
<AccordionItem value="sms" disabled>
<AccordionTrigger>Text messages</AccordionTrigger>
<AccordionContent>Not available on your plan.</AccordionContent>
</AccordionItem>
</Accordion>Do and don't
Do
- Write titles the user scans for: a question, or the name of a group of settings.
- Set headingLevel to one below the heading the accordion sits under.
- Use type multiple when users compare sections side by side.
Don't
- Don't hide what everyone needs; keep it on the page.
- Don't use it to switch between views of the same content; use Tabs.
- Don't put an accordion inside an accordion section.
Props
| Name | Type | Values | Default | Description |
|---|---|---|---|---|
| type | enum | single | multiple | single | Set on Accordion. single opens one section at a time; multiple lets several stay open, for settings the user compares. |
| collapsible | boolean | - | true | Set on Accordion, with type single. The open section closes when its title is pressed again. |
| defaultValue | string | - | - | Set on Accordion. The value of the section open on first render (an array of values with type multiple). |
| value | string | - | - | Set on Accordion. The open section, when you control it. Pair it with onValueChange. |
| onValueChange | function | - | - | Set on Accordion. Called with the open value (or values) when a section opens or closes. |
| headingLevel | enum | 2 | 3 | 4 | 3 | Set on Accordion. The heading level of every title: one below the heading the accordion sits under. |
| disabled | boolean | - | false | Set on AccordionItem, or on Accordion for every section. The title can't be pressed and dims. |
Slots
| Name | Required | Description |
|---|---|---|
| item | yes | One AccordionItem per section, each with a unique value, an AccordionTrigger and an AccordionContent. |
Anatomy
| Part | Description |
|---|---|
| root | Accordion: a column as wide as its parent. |
| item | AccordionItem: one section, with a divider under it. |
| trigger | AccordionTrigger: the title row, a button inside a heading. At least the md control height, 14px medium text, the caret at the end. |
| icon | Tabler ChevronDown, 16px, secondary, at the end of the title; half a turn when open. |
| content | AccordionContent: the part that opens, 13px secondary text. |
| body | The padded block inside the content, pb-md, so nothing shows while it grows. |
Accessibility
Role: region
| Keys | Action |
|---|---|
| Space, Enter | Opens or closes the focused section. |
| ArrowDown, ArrowUp | Moves focus to the next or previous section title. |
| Home, End | Moves focus to the first or last section title. |
| Tab | Moves from a title into the open content, then on. |
- Each title is a button with aria-expanded inside a real heading, h3 by default; set headingLevel so it fits the page's outline.
- An open section is a region named by its title.
- The caret is decorative; aria-expanded says whether it is open.
- It opens with a short grow and fade only when the user allows motion, and closes at once.
Install
npx shadcn add https://werewolf-ui.vercel.app/r/accordion.jsonThis also adds styles/werewolf.css, the tokens every component uses, and any other component it needs. Import that file once in your root CSS, after @import "tailwindcss", with a path relative to that CSS file (from app/globals.css it is @import "../styles/werewolf.css").