[ [UI.53] Layout ] Accordion

Accordion

> A vertically stacked set of interactive headings that each reveal a section of content.

Import

[ [0x5B] IMPORT ]

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/components/ui/accordion"

Preview

[ [0x00] ACCORDION ]

1<Accordion type="single" collapsible className="w-full">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Is it accessible?</AccordionTrigger>
4    <AccordionContent>
5      Yes. It adheres to the WAI-ARIA design pattern.
6    </AccordionContent>
7  </AccordionItem>
8</Accordion>

Variants

[ [0x00] SINGLE ]

1<Accordion type="single" collapsible className="w-full">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Authentication</AccordionTrigger>
4    <AccordionContent>
5      NextAuth v5 with JWT sessions. Supports credentials and OAuth
6      providers.
7    </AccordionContent>
8  </AccordionItem>
9  <AccordionItem value="item-2">
10    <AccordionTrigger>Database</AccordionTrigger>
11    <AccordionContent>
12      PostgreSQL with Prisma ORM. Includes migrations and type safety.
13    </AccordionContent>
14  </AccordionItem>
15  <AccordionItem value="item-3">
16    <AccordionTrigger>Payments</AccordionTrigger>
17    <AccordionContent>
18      Polar.sh integration with webhook handling for subscriptions.
19    </AccordionContent>
20  </AccordionItem>
21</Accordion>

[ [0x00] MULTIPLE ]

1<Accordion type="multiple" className="w-full">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Tech Stack</AccordionTrigger>
4    <AccordionContent>
5      Next.js 15 (App Router, React 19) with TypeScript strict mode.
6    </AccordionContent>
7  </AccordionItem>
8  <AccordionItem value="item-2">
9    <AccordionTrigger>Styling</AccordionTrigger>
10    <AccordionContent>
11      Tailwind CSS 4 with DaisyUI themes and design tokens.
12    </AccordionContent>
13  </AccordionItem>
14  <AccordionItem value="item-3">
15    <AccordionTrigger>Components</AccordionTrigger>
16    <AccordionContent>
17      87 production-ready components with Radix UI primitives.
18    </AccordionContent>
19  </AccordionItem>
20</Accordion>

[ [0x00] DEFAULT OPEN ]

Run npm run build to create a production build with optimizations.

1<Accordion type="single" collapsible defaultValue="item-2" className="w-full">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Development</AccordionTrigger>
4    <AccordionContent>
5      Run npm run dev to start the development server on port 3000.
6    </AccordionContent>
7  </AccordionItem>
8  <AccordionItem value="item-2">
9    <AccordionTrigger>Build</AccordionTrigger>
10    <AccordionContent>
11      Run npm run build to create a production build with optimizations.
12    </AccordionContent>
13  </AccordionItem>
14  <AccordionItem value="item-3">
15    <AccordionTrigger>Deploy</AccordionTrigger>
16    <AccordionContent>
17      Deploy to Vercel with automatic CI/CD and edge runtime support.
18    </AccordionContent>
19  </AccordionItem>
20</Accordion>

[ [0x00] CONTROLLED ]

1const [value, setValue] = React.useState("item-1");
2
3<Accordion type="single" value={value} onValueChange={setValue}>
4  <AccordionItem value="item-1">
5    <AccordionTrigger>Controlled Item</AccordionTrigger>
6    <AccordionContent>
7      State is managed externally via value prop.
8    </AccordionContent>
9  </AccordionItem>
10</Accordion>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
type	`"single" \| "multiple"`	`"single"`	Determines whether one or multiple items can be opened.
collapsible	`boolean`	`false`	Allow closing the open item (only for type='single').
defaultValue	`string \| string[]`	`undefined`	The default open item(s).
value	`string \| string[]`	`undefined`	Controlled state for open item(s).
onValueChange	`(value: string \| string[]) => void`	`undefined`	Callback when open item(s) change.
disabled	`boolean`	`false`	Disable all accordion items.

Accessibility

[ [0x58] A11Y ]

Built on Radix UI Accordion with full ARIA support
Keyboard navigation: Tab to focus trigger, Space/Enter to toggle
Arrow keys navigate between triggers
Properly implements aria-expanded and aria-controls
Screen reader announces state changes (expanded/collapsed)
Focus management returns focus after closing

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Accordion when:

• Displaying long content that benefits from progressive disclosure (FAQs, docs sections)
• Saving vertical space while keeping all content accessible
• User doesn't need to see all content simultaneously
• Content has clear section headers (3+ sections recommended)
• Grouping related information that users can explore selectively

✗ Don't use when:

• All content needs to be visible for comparison (use Tabs or full display)
• Only 1-2 items (unnecessary interaction overhead, just show content)
• Linear reading flow is critical (use traditional sections)
• Navigation is the primary purpose (use Navigation component or Tabs)
• Mobile space-saving is the only reason (consider Card collapse instead)

Best Practices:

• Use type="single" for mutual exclusivity (only one open at a time)
• Use type="multiple" when users need to compare content across items
• Add collapsible prop to allow closing the active item in single mode
• Set defaultValue for most important/frequently accessed item
• Keep trigger text concise (1-5 words, clear question or topic)
• Use value and onValueChange for programmatic control
• Limit to 5-10 items maximum (longer lists reduce scannability)
• Content should be substantial enough to justify hiding (3+ lines)

Preview

[ [0x00] ACCORDION ]

1<Accordion type="single" collapsible className="w-full">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Is it accessible?</AccordionTrigger>
4    <AccordionContent>
5      Yes. It adheres to the WAI-ARIA design pattern.
6    </AccordionContent>
7  </AccordionItem>
8</Accordion>

Variants

[ [0x00] SINGLE ]

1<Accordion type="single" collapsible className="w-full">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Authentication</AccordionTrigger>
4    <AccordionContent>
5      NextAuth v5 with JWT sessions. Supports credentials and OAuth
6      providers.
7    </AccordionContent>
8  </AccordionItem>
9  <AccordionItem value="item-2">
10    <AccordionTrigger>Database</AccordionTrigger>
11    <AccordionContent>
12      PostgreSQL with Prisma ORM. Includes migrations and type safety.
13    </AccordionContent>
14  </AccordionItem>
15  <AccordionItem value="item-3">
16    <AccordionTrigger>Payments</AccordionTrigger>
17    <AccordionContent>
18      Polar.sh integration with webhook handling for subscriptions.
19    </AccordionContent>
20  </AccordionItem>
21</Accordion>

[ [0x00] MULTIPLE ]

1<Accordion type="multiple" className="w-full">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Tech Stack</AccordionTrigger>
4    <AccordionContent>
5      Next.js 15 (App Router, React 19) with TypeScript strict mode.
6    </AccordionContent>
7  </AccordionItem>
8  <AccordionItem value="item-2">
9    <AccordionTrigger>Styling</AccordionTrigger>
10    <AccordionContent>
11      Tailwind CSS 4 with DaisyUI themes and design tokens.
12    </AccordionContent>
13  </AccordionItem>
14  <AccordionItem value="item-3">
15    <AccordionTrigger>Components</AccordionTrigger>
16    <AccordionContent>
17      87 production-ready components with Radix UI primitives.
18    </AccordionContent>
19  </AccordionItem>
20</Accordion>

[ [0x00] DEFAULT OPEN ]

Run npm run build to create a production build with optimizations.

1<Accordion type="single" collapsible defaultValue="item-2" className="w-full">
2  <AccordionItem value="item-1">
3    <AccordionTrigger>Development</AccordionTrigger>
4    <AccordionContent>
5      Run npm run dev to start the development server on port 3000.
6    </AccordionContent>
7  </AccordionItem>
8  <AccordionItem value="item-2">
9    <AccordionTrigger>Build</AccordionTrigger>
10    <AccordionContent>
11      Run npm run build to create a production build with optimizations.
12    </AccordionContent>
13  </AccordionItem>
14  <AccordionItem value="item-3">
15    <AccordionTrigger>Deploy</AccordionTrigger>
16    <AccordionContent>
17      Deploy to Vercel with automatic CI/CD and edge runtime support.
18    </AccordionContent>
19  </AccordionItem>
20</Accordion>

[ [0x00] CONTROLLED ]

1const [value, setValue] = React.useState("item-1");
2
3<Accordion type="single" value={value} onValueChange={setValue}>
4  <AccordionItem value="item-1">
5    <AccordionTrigger>Controlled Item</AccordionTrigger>
6    <AccordionContent>
7      State is managed externally via value prop.
8    </AccordionContent>
9  </AccordionItem>
10</Accordion>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
type	`"single" \| "multiple"`	`"single"`	Determines whether one or multiple items can be opened.
collapsible	`boolean`	`false`	Allow closing the open item (only for type='single').
defaultValue	`string \| string[]`	`undefined`	The default open item(s).
value	`string \| string[]`	`undefined`	Controlled state for open item(s).
onValueChange	`(value: string \| string[]) => void`	`undefined`	Callback when open item(s) change.
disabled	`boolean`	`false`	Disable all accordion items.

Accessibility

[ [0x58] A11Y ]

Built on Radix UI Accordion with full ARIA support
Keyboard navigation: Tab to focus trigger, Space/Enter to toggle
Arrow keys navigate between triggers
Properly implements aria-expanded and aria-controls
Screen reader announces state changes (expanded/collapsed)
Focus management returns focus after closing

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Accordion when:

• Displaying long content that benefits from progressive disclosure (FAQs, docs sections)
• Saving vertical space while keeping all content accessible
• User doesn't need to see all content simultaneously
• Content has clear section headers (3+ sections recommended)
• Grouping related information that users can explore selectively

✗ Don't use when:

• All content needs to be visible for comparison (use Tabs or full display)
• Only 1-2 items (unnecessary interaction overhead, just show content)
• Linear reading flow is critical (use traditional sections)
• Navigation is the primary purpose (use Navigation component or Tabs)
• Mobile space-saving is the only reason (consider Card collapse instead)

Best Practices:

• Use type="single" for mutual exclusivity (only one open at a time)
• Use type="multiple" when users need to compare content across items
• Add collapsible prop to allow closing the active item in single mode
• Set defaultValue for most important/frequently accessed item
• Keep trigger text concise (1-5 words, clear question or topic)
• Use value and onValueChange for programmatic control
• Limit to 5-10 items maximum (longer lists reduce scannability)
• Content should be substantial enough to justify hiding (3+ lines)

Accordion

Import

Preview

Is it accessible?

Variants

Authentication

Database

Payments

Tech Stack

Styling

Components

Development

Build

Deploy

[STATE]: CONTROLLED

API Reference

Accessibility

When to Use

Accordion

Import

Preview

Is it accessible?

Variants

Authentication

Database

Payments

Tech Stack

Styling

Components

Development

Build

Deploy

[STATE]: CONTROLLED

API Reference

Accessibility

When to Use