Vibe UI
Initializing Vibe UI System...
Vibe UI

Accordion

A vertically stacked set of interactive headings that each disclose an associated content pane.

Accordion

A vertically stacked set of interactive headings that each disclose an associated content pane.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add accordion

Real-World Examples

FAQ Section

Multi-Expandable

Set type="multiple" to allow users to expand multiple or all accordion items simultaneously.

This section is open by default and stays open when expanding other sections.

Both Section 1 and Section 2 can be open at the exact same time.

Billing Terms

Card Layout

Premium Presets

Settings Portal

A dashboard settings panel layout where users can edit their profile info and preferences.

Checkout Wizard

Ideal for conversion-optimized e-commerce sites where checkout forms are split into interactive tabs.

Props

PropTypeDefaultDescription
type"single" | "multiple""single"Determines whether one or multiple items can be opened at a time.
collapsiblebooleanfalseWhen type="single", allows closing an item by clicking its trigger again.
defaultValuestring | string[]-The value of the item(s) that should be expanded by default.
PropTypeDefaultDescription
valuestringRequiredA unique identifier for the item.
variant"default" | "glass" | "retro" | "cyberpunk""default"Visual preset theme variant.
disabledbooleanfalseWhen true, prevents the user from interacting with the item.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Accordion | Vibe UI