Accordion
accordionData array — the wrapper maps it to items, icons and content for you. Switch on animation="stack" and the items start piled on the first one and deal down into place when the accordion scrolls into view.Accordion
- Pass
accordionData - as an array of
{ value, title, icon, content }—contentis an array of paragraphs andicona key of the block'sICON_MAP. type"single"- keeps one panel open at a time.
collapsible- lets the open panel be closed again, leaving all of them shut.
defaultValue"getting-started"- matches an item's
valueto decide which panel starts open. - Add
animation"stack" - to start the items piled on the first one and deal them into place when the accordion scrolls into view. Reload the preview to watch it again.
Brand logo reveal
Accordion brand logo showcase with animated horizontal pleats, autoplay progress indicator, hover pause, and responsive stacking. Inspired by Framer Brand Logo Reveal.
- Pass
variant"brand-reveal" - to display an editorial horizontal brand accordion, or use
<BrandLogoAccordion />directly. autoplaytrue- cycles through client/partner brands on an automated timer.
autoplayInterval4000- duration in milliseconds before revealing the next brand.
pauseOnHovertrue- pauses autoplay when the cursor hovers over any panel.
Installation
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.
Install Accordion
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Step 1 installs these for you. Run them yourself only if you are adding Accordion to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component. @radix-ui/react-accordion comes in with the component above rather than from Accordion directly.
ui-accordion is a component, not a package — the shadcn CLI installs it as source files.
@radix-ui/react-accordion is an npm package.
Examples
Multiple open
- Set
type"multiple" - to let any number of panels stay open at once.
defaultValue- becomes an array in this mode — passing a bare string silently opens nothing.
Always one open
- Set
collapsible{false} - to stop the user closing the last open panel, so exactly one is always showing. Pair it with a
defaultValueor the accordion starts fully closed.
Multiple permanent open
- Set
type"multiple" - and
collapsible={false}to allow opening multiple panels, but preventing opened panels from being closed.
Stack entrance
The deal-out entrance on the elevated variant. It works with all five.
- Set
animation"stack" - to pile the items on the first one and deal them down with a stagger. It runs once, when the accordion first scrolls into view, and is skipped when the visitor prefers reduced motion.
variant"elevated"- keeps every item on its own card, so the open one rises on a primary ring instead of changing shape.
All variants
Same data, five looks. Pick by how much the accordion should stand out from what surrounds it.
variant"default"- keeps closed rows quiet and lifts the open one out as a card. Best on a plain page background.
variant"bordered"- wraps everything in one outlined panel with a rail on the open row. Best inside cards and settings pages.
variant"filled"- inverts the open item to your primary color. Loudest of the five.
variant"ghost"- is type and hairlines only. Best for long editorial FAQs.
Features
Follows your theme
Every variant is built from the shadcn tokens, so changing --primary restyles the open panel, the rail and the icon tile together.
Accessible
Radix handles roles, arrow-key navigation and focus. The visible focus ring follows the shape of each variant, and the entrance respects reduced motion.
Responsive
Rows wrap cleanly at phone width; the open card in the default variant only grows wider than the list from sm up.
No animation library
The stack entrance uses the Web Animations API and runs once. The only dependency beyond Radix is lucide-react.
Best Practices & Guidelines
Usage Guidelines
Use animation="stack" once per page, on the accordion you want people to notice; two decks dealing at the same time cancel each other out. Give it at least three items so the pile reads as a deck, and keep defaultValue set so the open card is part of the deal.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
accordionData | AccordionDataItem[] | [] | Array of objects defining value, title,
icon, and content. |
variant | "default" | "bordered" | "filled" | "elevated" | "ghost" | "brand-reveal" | "default" | Which look to use. default lifts the open row out as a
card, bordered grows a rail on it, filled
inverts it to primary, elevated raises it on
a ring, ghost is type and hairlines only, and
brand-reveal renders an interactive horizontal brand showcase. |
brands | BrandItem[] | DEFAULT_BRANDS | Used when variant="brand-reveal". Array of objects defining id, name, caption, and optional logo, link, and index. |
animation | "none" | "stack" | "none" | "stack" piles the items on the first one and deals them
into place once the accordion scrolls into view. Runs once; skipped
under prefers-reduced-motion. |
type | "single" | "multiple" | "single" | Determines if one or multiple panels can be open simultaneously. |
collapsible | boolean | true | If type="single", allows closing the currently open
panel. |
defaultValue | string | string[] | null | The value of the item(s) open by default. |
expandIcon | ReactNode | string | null | Overrides the default chevron icon. Pass a lucide string like
"Plus". |
className | string | "" | Custom classes applied to the root container. |
itemClassName | string | "" | Custom classes applied to individual accordion items. |
triggerClassName | string | "" | Custom classes applied to the clickable trigger row. |
contentClassName | string | "" | Custom classes applied to the expanded content area. |