Add this component

npx zentauri-ui add accordion

Accessibility notes

Disclosure and tab patterns expose keyboard navigation and state. Keep headings, labels, and panel content meaningful for screen readers.

Dependency notes

Static imports do not pull framer-motion. Use the animated entry only when you want motion and have framer-motion installed.

Disclosure

Accordion for stacked disclosures

The Accordion component composes triggers and panels so you can ship stacked disclosures in React apps. Pair it with Tailwind spacing tokens in Next.js layouts for predictable rhythm.

Standard delivery in 3-5 business days. Express options at checkout.

Accordion variants playground

Pick an appearance, size, type, and transition to preview the accordion live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Appearance

Size

Type

Transition

Content for the first item.

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

Content for the first item.

Accordion API

Generated from the package prop types and variant definitions.

Accordion

AccordionProps

Variants

Prop	Type	Default
appearance	`aquabluecardcrimsoncyandefaultelectricemeraldforestghostgradient-bluegradient-green`+32	default
size	`lgmdsm`	md

State

Prop	Type	Default
defaultValue	`string \| undefined`	none
defaultValues	`string[] \| undefined`	none
onValueChange	`((value: string \| undefined) => void) \| undefined`	none
onValuesChange	`((values: string[]) => void) \| undefined`	none
valueControlled value for `single` mode.	`string \| undefined`	none
valuesControlled values for `multiple` mode.	`string[] \| undefined`	none

Behavior

Prop	Type	Default
type	`AccordionType \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none

AccordionContent

AccordionContentProps

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

AccordionItem

AccordionItemProps

State

Prop	Type	Default
value*	`string`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

AccordionTrigger

AccordionTriggerProps

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLButtonElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

AccordionAnimated

AccordionAnimatedProps

animated

State

Prop	Type	Default
defaultValue	`string \| undefined`	none
defaultValues	`string[] \| undefined`	none
onValueChange	`((value: string \| undefined) => void) \| undefined`	none
onValuesChange	`((values: string[]) => void) \| undefined`	none
valueControlled value for `single` mode.	`string \| undefined`	none
valuesControlled values for `multiple` mode.	`string[] \| undefined`	none

Behavior

Prop	Type	Default
appearance	'default' \| 'outline' \| 'ghost' \| 'card' \| 'separated' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none
type	`AccordionType \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none

AccordionContentAnimated

AccordionContentAnimatedProps

animated

Behavior

Prop	Type	Default
transitionVariant	`AccordionTransition \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CSS variable overrides

Accordion CSS variables

Override these accordion variables on :root, a theme selector, or a component wrapper.

338 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-accordion-default-divider: #0000001a;
  --zui-accordion-default-border: #0000001a;
  --zui-accordion-outline-divider: #0000001a;
  --zui-accordion-outline-border: #00000026;
  --zui-accordion-ghost-divider: #0000000d;
  --zui-accordion-blue-divider: #2563eb;
  --zui-accordion-blue-border: #2563eb;
  --zui-accordion-cyan-divider: #0891b2;
  --zui-accordion-cyan-border: #0891b2;
  --zui-accordion-green-divider: #16a34a;
  --zui-accordion-green-border: #16a34a;
  --zui-accordion-lime-divider: #65a30d;
  --zui-accordion-lime-border: #65a30d;
  --zui-accordion-mint-divider: #10b981;
  --zui-accordion-mint-border: #10b981;
  --zui-accordion-ocean-divider: #0284c7;
  --zui-accordion-ocean-border: #0284c7;
  --zui-accordion-sapphire-divider: #1d4ed8;
  --zui-accordion-sapphire-border: #1d4ed8;
  --zui-accordion-lavender-divider: #8b5cf6;
  --zui-accordion-lavender-border: #8b5cf6;
  --zui-accordion-ruby-divider: #be123c;
  --zui-accordion-ruby-border: #be123c;
  --zui-accordion-red-divider: #dc2626;
  --zui-accordion-red-border: #dc2626;
  --zui-accordion-slate-divider: #475569;
  --zui-accordion-slate-border: #475569;
  --zui-accordion-zinc-divider: #52525b;
  --zui-accordion-zinc-border: #52525b;
  --zui-accordion-stone-divider: #57534e;
  --zui-accordion-stone-border: #57534e;
  --zui-accordion-royal-divider: #4338ca;
  --zui-accordion-royal-border: #4338ca;
  --zui-accordion-electric-divider: #0ea5e9;
  --zui-accordion-electric-border: #0ea5e9;
  --zui-accordion-forest-divider: #166534;
  --zui-accordion-forest-border: #166534;
  --zui-accordion-sunset-divider: #ea580c;
  --zui-accordion-sunset-border: #ea580c;
  --zui-accordion-magenta-divider: #c026d3;
  --zui-accordion-magenta-border: #c026d3;
  --zui-accordion-crimson-divider: #b91c1c;
  --zui-accordion-crimson-border: #b91c1c;
  --zui-accordion-aqua-divider: #0f766e;
  --zui-accordion-aqua-border: #0f766e;
  --zui-accordion-plum-divider: #7e22ce;
  --zui-accordion-plum-border: #7e22ce;
  --zui-accordion-sky-divider: oklch(44.3% 0.11 240.79);
  --zui-accordion-sky-border: oklch(44.3% 0.11 240.79);
  --zui-accordion-rose-divider: oklch(45.5% 0.188 13.697);
  --zui-accordion-rose-border: oklch(45.5% 0.188 13.697);
  --zui-accordion-purple-divider: oklch(43.8% 0.218 303.724);
  --zui-accordion-purple-border: oklch(43.8% 0.218 303.724);
  --zui-accordion-pink-divider: oklch(45.9% 0.187 3.815);
  --zui-accordion-pink-border: oklch(45.9% 0.187 3.815);
  --zui-accordion-orange-divider: oklch(47% 0.157 37.304);
  --zui-accordion-orange-border: oklch(47% 0.157 37.304);
  --zui-accordion-yellow-divider: oklch(47.6% 0.114 61.907);
  --zui-accordion-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-accordion-teal-divider: oklch(43.7% 0.078 188.216);
  --zui-accordion-teal-border: oklch(43.7% 0.078 188.216);
  --zui-accordion-indigo-divider: oklch(39.8% 0.195 277.366);
  --zui-accordion-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-accordion-emerald-divider: oklch(43.2% 0.095 166.913);
  --zui-accordion-emerald-border: oklch(43.2% 0.095 166.913);
  --zui-accordion-gradient-blue-divider: oklch(42.4% 0.199 265.638);
  --zui-accordion-gradient-blue-border: oklch(42.4% 0.199 265.638);
  --zui-accordion-gradient-green-divider: oklch(44.8% 0.119 151.328);
  --zui-accordion-gradient-green-border: oklch(44.8% 0.119 151.328);
  --zui-accordion-gradient-red-divider: oklch(44.4% 0.177 26.899);
  --zui-accordion-gradient-red-border: oklch(44.4% 0.177 26.899);
  --zui-accordion-gradient-yellow-divider: oklch(47.6% 0.114 61.907);
  --zui-accordion-gradient-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-accordion-gradient-purple-divider: oklch(43.8% 0.218 303.724);
  --zui-accordion-gradient-purple-border: oklch(43.8% 0.218 303.724);
  --zui-accordion-gradient-teal-divider: oklch(43.7% 0.078 188.216);
  --zui-accordion-gradient-teal-border: oklch(43.7% 0.078 188.216);
  --zui-accordion-gradient-indigo-divider: oklch(39.8% 0.195 277.366);
  --zui-accordion-gradient-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-accordion-gradient-pink-divider: oklch(45.9% 0.187 3.815);
  --zui-accordion-gradient-pink-border: oklch(45.9% 0.187 3.815);
  --zui-accordion-gradient-orange-divider: oklch(47% 0.157 37.304);
  --zui-accordion-gradient-orange-border: oklch(47% 0.157 37.304);
  --zui-accordion-item-fg: oklch(20.8% 0.042 265.755);
  --zui-accordion-item-card-border: #0000001a;
  --zui-accordion-item-card-bg: #0000000d;
  --zui-accordion-item-separated-border: #0000001a;
  --zui-accordion-item-separated-bg: oklch(98.4% 0.003 247.858 / 0.4);
  --zui-accordion-item-blue-border: #2563eb;
  --zui-accordion-item-blue-bg: #2563eb1a;
  --zui-accordion-item-cyan-border: #0891b2;
  --zui-accordion-item-cyan-bg: #0891b21a;
  --zui-accordion-item-green-border: #16a34a;
  --zui-accordion-item-green-bg: #16a34a1a;
  --zui-accordion-item-lime-border: #65a30d;
  --zui-accordion-item-lime-bg: #65a30d1a;
  --zui-accordion-item-mint-border: #10b981;
  --zui-accordion-item-mint-bg: #10b9811a;
  --zui-accordion-item-ocean-border: #0284c7;
  --zui-accordion-item-ocean-bg: #0284c71a;
  --zui-accordion-item-sapphire-border: #1d4ed8;
  --zui-accordion-item-sapphire-bg: #1d4ed81a;
  --zui-accordion-item-lavender-border: #8b5cf6;
  --zui-accordion-item-lavender-bg: #8b5cf61a;
  --zui-accordion-item-ruby-border: #be123c;
  --zui-accordion-item-ruby-bg: #be123c1a;
  --zui-accordion-item-red-border: #dc2626;
  --zui-accordion-item-red-bg: #dc26261a;
  --zui-accordion-item-slate-border: #475569;
  --zui-accordion-item-slate-bg: #4755691a;
  --zui-accordion-item-zinc-border: #52525b;
  --zui-accordion-item-zinc-bg: #52525b1a;
  --zui-accordion-item-stone-border: #57534e;
  --zui-accordion-item-stone-bg: #57534e1a;
  --zui-accordion-item-royal-border: #4338ca;
  --zui-accordion-item-royal-bg: #4338ca1a;
  --zui-accordion-item-electric-border: #0ea5e9;
  --zui-accordion-item-electric-bg: #0ea5e91a;
  --zui-accordion-item-forest-border: #166534;
  --zui-accordion-item-forest-bg: #1665341a;
  --zui-accordion-item-sunset-border: #ea580c;
  --zui-accordion-item-sunset-bg: #ea580c1a;
  --zui-accordion-item-magenta-border: #c026d3;
  --zui-accordion-item-magenta-bg: #c026d31a;
  --zui-accordion-item-crimson-border: #b91c1c;
  --zui-accordion-item-crimson-bg: #b91c1c1a;
  --zui-accordion-item-aqua-border: #0f766e;
  --zui-accordion-item-aqua-bg: #0f766e1a;
  --zui-accordion-item-plum-border: #7e22ce;
  --zui-accordion-item-plum-bg: #7e22ce1a;
  --zui-accordion-item-sky-border: oklch(44.3% 0.11 240.79);
  --zui-accordion-item-sky-bg: oklch(95.1% 0.026 236.824 / 0.5);
  --zui-accordion-item-rose-border: oklch(45.5% 0.188 13.697);
  --zui-accordion-item-rose-bg: oklch(94.1% 0.03 12.58 / 0.5);
  --zui-accordion-item-purple-border: oklch(43.8% 0.218 303.724);
  --zui-accordion-item-purple-bg: oklch(94.6% 0.033 307.174 / 0.5);
  --zui-accordion-item-pink-border: oklch(45.9% 0.187 3.815);
  --zui-accordion-item-pink-bg: oklch(94.8% 0.028 342.258 / 0.5);
  --zui-accordion-item-orange-border: oklch(47% 0.157 37.304);
  --zui-accordion-item-orange-bg: oklch(95.4% 0.038 75.164 / 0.5);
  --zui-accordion-item-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-accordion-item-yellow-bg: oklch(97.3% 0.071 103.193 / 0.5);
  --zui-accordion-item-teal-border: oklch(43.7% 0.078 188.216);
  --zui-accordion-item-teal-bg: oklch(95.3% 0.051 180.801 / 0.5);
  --zui-accordion-item-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-accordion-item-indigo-bg: oklch(93% 0.034 272.788 / 0.5);
  --zui-accordion-item-emerald-border: oklch(43.2% 0.095 166.913);
  --zui-accordion-item-emerald-bg: oklch(95% 0.052 163.051 / 0.5);
  --zui-accordion-item-gradient-blue-from: oklch(80.9% 0.105 251.813);
  --zui-accordion-item-gradient-blue-to: oklch(82.7% 0.119 306.383);
  --zui-accordion-item-gradient-green-from: oklch(87.1% 0.15 154.449);
  --zui-accordion-item-gradient-green-to: oklch(89.7% 0.196 126.665);
  --zui-accordion-item-gradient-red-from: oklch(80.8% 0.114 19.571);
  --zui-accordion-item-gradient-red-to: oklch(82.3% 0.12 346.018);
  --zui-accordion-item-gradient-yellow-from: oklch(90.5% 0.182 98.111);
  --zui-accordion-item-gradient-yellow-to: oklch(83.7% 0.128 66.29);
  --zui-accordion-item-gradient-purple-from: oklch(82.7% 0.119 306.383);
  --zui-accordion-item-gradient-purple-to: oklch(82.3% 0.12 346.018);
  --zui-accordion-item-gradient-teal-from: oklch(85.5% 0.138 181.071);
  --zui-accordion-item-gradient-teal-to: oklch(86.5% 0.127 207.078);
  --zui-accordion-item-gradient-indigo-from: oklch(78.5% 0.115 274.713);
  --zui-accordion-item-gradient-indigo-to: oklch(82.7% 0.119 306.383);
  --zui-accordion-item-gradient-pink-from: oklch(82.3% 0.12 346.018);
  --zui-accordion-item-gradient-pink-to: oklch(81% 0.117 11.638);
  --zui-accordion-item-gradient-orange-from: oklch(83.7% 0.128 66.29);
  --zui-accordion-item-gradient-orange-to: oklch(80.8% 0.114 19.571);
  --zui-accordion-trigger-fg: oklch(27.9% 0.041 260.031);
  --zui-accordion-trigger-fg-hover: oklch(20.8% 0.042 265.755);
  --zui-accordion-trigger-ring-focus: #0000004d;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-accordion-default-divider-dark: #ffffff1a;
  --zui-accordion-default-border-dark: #ffffff1a;
}

What it does

Each item manages its own open state while sharing motion presets for expand and collapse.

Use semantic buttons for triggers so screen readers expose the expanded/collapsed state clearly.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Forward refs where you attach measurements or analytics. Avoid nesting interactive controls inside triggers.

Common use cases

FAQ pages that keep SEO-friendly headings while hiding verbose answers.
Settings screens that group advanced options per section.
Docs sites that reveal code samples on demand.
Mobile-first navigation stacks with limited vertical space.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Accordion component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize accordion with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Accordion implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.

Accessibility notes

Dependency notes

Accordion for stacked disclosures

Shipping

Returns

Accordion variants playground

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel

First panel

Second panel