Accordion
Bouncy accordion: height springs open, the chevron flips, and content fades up a beat later.
- Category: Display
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Accordion
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | { value: string; title: ReactNode; content: ReactNode }[] | — | |
type | "single" | "multiple" | "single" | |
defaultValue | string[] | — |
About Accordion
Accordion folds content away until it is needed. Height springs open, the chevron flips, and the content fades up a beat later so the eye follows it. Single or multiple panels can be open.
Accordion is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Accordion
- FAQ sections on landing and pricing pages.
- Settings grouped into collapsible sections.
- Product details like specs and shipping.
- Long docs pages with optional depth.
How it works
Each header is a button with aria-expanded controlling a region, and arrow keys move between headers. Height animates from zero to the measured content, so it works with any content length.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Accordion
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change type live, and the Code tab updates to match, so the snippet you copy already carries your values.
- items.
- type ("single" | "multiple", default "single").
- defaultValue (string[]).
Goes well with Accordion
Accordion is already composed into 4 ready-made sections, so you can see it in context or install the whole block.
- FAQ Split: FAQ section
- FAQ Search: FAQ section
- FAQ Support: FAQ section
- Product Detail: Commerce section
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
- Copy Button: A React copy button whose icon blurs into a drawn check, then swaps back
Install Accordion
npx shadcn@latest add https://charcoalui.com/r/accordion.jsonAccordion is free and MIT licensed. The command copies accordion.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Expandable Card, a Pro piece: A card that grows in place to reveal more, while its neighbours make room smoothly.
Frequently asked questions
- How do I install Accordion?
- Run npx shadcn@latest add https://charcoalui.com/r/accordion.json. The shadcn CLI copies accordion.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Accordion free for commercial use?
- Yes. Accordion is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Accordion work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Accordion?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Accordion's props and source and get_install_command returns the exact command.