Skip to main content
Accordions allow users to expand and collapse content sections. Use accordions for progressive disclosure and to organize information.

Single accordion

You can put any content in here, including other components, like code:
HelloWorld.java
Accordion example

Accordion groups

Group related accordions together using <AccordionGroup>. This creates a cohesive section of accordions that can be individually expanded or collapsed.
You can put other components inside Accordions.
HelloWorld.java
Add icons to make accordions more visually distinct and scannable.
Keep related content organized into groups.
Accordion Group Example

Properties

string
required
Title in the Accordion preview.
string
Detail below the title in the Accordion preview.
boolean
default:"false"
Whether the Accordion is open by default.
string
Optional icon name from the Lucide icon library