Accordion
A high-quality, styled React accordion component powered by @base-ui/react that displays a set of collapsible panels with headings.
The Accordion component displays a set of collapsible panels with headings, built on top of @base-ui/react/accordion primitives.
Usage
import { Accordion } from "@/components/ui/accordion";
export function ExampleAccordion() {
return (
<Accordion.Root>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger>What is adn-ui?</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel>
adn-ui is a modern component library built with Next.js, React 19, Tailwind CSS v4, and Base
UI.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger>Is it customizable?</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel>
Yes! Every slot component uses tailwind-variants and supports custom classes.
</Accordion.Panel>
</Accordion.Item>
</Accordion.Root>
);
}Preview
Variants
Default
The standard accordion card layout with borders and background.
<Accordion.Root variant="default">
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger>What is Base UI?</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel>
Base UI is a library of high-quality unstyled React components for design systems and web
apps.
</Accordion.Panel>
</Accordion.Item>
</Accordion.Root>Multiple Open Panels
Use the multiple prop to allow multiple panels to be open simultaneously.
<Accordion.Root multiple variant="outline">
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger>First Panel</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel>Multiple panels can stay expanded at once.</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger>Second Panel</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel>This panel can also be expanded at the same time.</Accordion.Panel>
</Accordion.Item>
</Accordion.Root>Custom Styling
Apply custom borders, background colors, and transition effects using the className prop on accordion items or triggers:
<Accordion.Root variant="ghost" className="space-y-2">
<Accordion.Item className="border border-indigo-500/20 bg-indigo-500/5 rounded-xl overflow-hidden">
<Accordion.Header>
<Accordion.Trigger className="text-indigo-600 dark:text-indigo-400 hover:no-underline font-semibold">
Custom Indigo Panel
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className="text-muted-foreground text-sm">
This panel features custom indigo highlights via inline class names.
</Accordion.Panel>
</Accordion.Item>
</Accordion.Root>Styling & Class Names
Target internal accordion CSS slots for custom overrides:
| Class Name | Element / Slot | Description |
|---|---|---|
.accordion | Root container | Main accordion container layout. |
.accordion__item | Accordion item | Individual panel item wrapper. |
.accordion__header | Header wrapper | Header container for trigger buttons. |
.accordion__trigger | Trigger button | Clickable header trigger element with chevron rotation. |
.accordion__panel | Expandable panel | Collapsible body content panel. |
Structure & Anatomy
import { Accordion } from "@base-ui/react/accordion";
<Accordion.Root>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger />
</Accordion.Header>
<Accordion.Panel />
</Accordion.Item>
</Accordion.Root>;API Reference
Accordion.Root
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'outline' | 'ghost' | 'default' | Visual styling variant. |
multiple | boolean | false | Allows multiple panels to be open simultaneously. |
defaultValue | Array | undefined | Initially open item value(s). |
value | Array | undefined | Controlled open item value(s). |
disabled | boolean | false | Disables interaction across the component. |
Agent Skills & npx skills
Learn how to equip AI coding assistants with adn-ui component design rules, Base UI primitive state bindings, and validation workflows using npx skills.
Alert Dialog
A high-quality, styled React alert dialog component built with @base-ui/react that requires a user response to proceed.