Accordion
An accordion is a vertically stacked set of headers that toggle associated content. Use it for FAQs, settings, and other dense information.
Loading Code Block...Pass items as items. Each item uses headerTitle (string, ReactNode, or (isOpen) => ReactNode) and content as React nodes. Optional headerIcon, iconPosition, hideIcon, and buttonGroupProps are also supported. The buttonGroupProps entry matches Button Group.
Pass items as items. Each item uses headerTitle and optional string content, or named slots keyed by item id (for example #item-1-header-title, #item-1-content) for richer markup. Optional headerIcon (functional component), iconPosition, and hideIcon are also supported on items.
Full example
Section titled “Full example”The example below uses the default type with collapsible behaviour, optional button groups, and mixed header patterns.
Loading Code Block...Basic example
Section titled “Basic example”The simplest accordion with collapsible items. Each item needs a unique id, a
Loading Code Block...Open behavior
Section titled “Open behavior”Control whether only one item can be open at a time (collapse) or multiple items can stay open simultaneously (always-open).
Collapse (Default)
Section titled “Collapse (Default)”When one item is opened, any previously open item automatically closes. Items with isActive: true will be open on initial mount.
Loading Code Block...Always open
Section titled “Always open”Multiple items can be expanded at the same time. Users can toggle each item independently without affecting others.
Loading Code Block...Default type
Section titled “Default type”The default type renders a clean, minimal accordion suited for dashboards and application panels. Content area has a scrollable max-height (max-h-[300px] on mobile, max-h-[350px] on desktop).
Loading Code Block...Website type
Section titled “Website type”The website type adds a bold border and shadow effect (border-2 border-black shadow-[0px_6px_0px_0px]) when an item is open, giving it a striking, editorial look ideal for marketing and landing pages. Button groups are not rendered in website mode, and content is not scrollable.
Loading Code Block...Custom headers
Section titled “Custom headers”You can fully customise the header of each accordion item.
Use headerTitle for the header. It accepts a string, a ReactNode, or a render function (isOpen: boolean) => ReactNode for full control over the rendered title. Use headerIcon (ReactNode | (isOpen: boolean) => ReactNode) to replace the default ChevronDownIcon — when omitted, the built-in chevron auto-rotates on open. Use iconPosition ("left" | "right", default "right") to switch which side the icon appears on, and pass hideIcon: true to remove the icon section entirely.
The Accordion uses named slots for fine-grained header control. Each item exposes slots based on its id:
#[id]-header-title— replace the header text. Falls back to theheaderTitleprop if not provided.#[id]-header-icon— replace the chevron icon. Receives{ isOpen }as a scoped slot prop. SethideIcon: trueon the item to hide the icon entirely.#[id]-content— provide the body content for the item.
Loading Code Block...With Button Group
Section titled “With Button Group”Each accordion item can include action buttons at the bottom of its content area using buttonGroupProps. This integrates with the ButtonGroup component and supports primary, secondary, and tertiary buttons.
Loading Code Block...Custom Item Styling
Section titled “Custom Item Styling”Use itemClassName to apply custom CSS classes to accordion items. It can be a static string or a function that receives the isOpen state for dynamic styling. Per-item itemClassName overrides the group-level value.
Loading Code Block...Pre-Expanded Items
Section titled “Pre-Expanded Items”Set isActive: true on any item to have it expanded by default when the accordion first renders. In collapse mode, only the first active item will be shown. In always-open mode, all active items will be expanded.
Loading Code Block...Accessibility
Section titled “Accessibility”The header trigger is keyboard-accessible and toggles on Enter or Space, and the hidden content is marked with aria-hidden while collapsed.
React renders the trigger as a div with role="button", tabIndex={0}, aria-expanded, and an onKeyDown handler.
Vue renders the trigger as a real <button> with tabindex="0", :aria-expanded, and @keydown.enter / @keydown.space handlers.
Both implementations expose the same role and announcements to assistive tech.
Accordion Props
Section titled “Accordion Props”Accordion Item Props
Section titled “Accordion Item Props”Vue Slot Reference
Content for accordion items is provided via template slots, not through the items array. The items array only contains configuration.
| Slot Name | Default | Type | Description |
|---|---|---|---|
| #[id]-header-title | { item } | - | Replace the header text for a specific item. Falls back to the headerTitle prop if not provided. |
| #[id]-header-icon | { isOpen } | - | Replace the chevron icon. Receives isOpen boolean to conditionally render icons based on open/closed state. |
| #[id]-content | { item, isOpen } | - | Primary slot. Provide the collapsible body content for a specific item. Falls back to the content prop if not provided. |
| #default | { item, isOpen } | - | Fallback slot for all items when no item-specific content slot is provided. |