Accordion

Basic Usage

I am an Accordion

mdx

<Accordion title="I am an Accordion">
  You can put any content in here.
</Accordion>

Accordion Group

Use the <AccordionGroup> component to group multiple accordions together. By default only one item stays open, but you can opt into multi-open behavior with the multi prop.

First Item

Second Item

Third Item

Pass the multi prop to AccordionGroup to keep several accordions open at the same time.

Only One Item Stays Open

Second Item

Keep Multiple Items Open

Default Open Item

Props

Accordion

title

string

The title text displayed in the accordion header.

description

string

Optional description text displayed below the title.

icon

ReactNode

Optional icon displayed next to the title.

defaultOpen

boolean

default: false

Whether the accordion is open by default.

AccordionGroup

children

ReactNode

The Accordion components to be grouped.

multi

boolean

default: false

Allow more than one accordion to stay open simultaneously when set to true.

Examples

With Description

Accordion with Description

This is a description text.

With Icon

Accordion with Icon

Default Open

Default Open Accordion

This accordion is open when the page loads.

Basic Usage

I am an Accordion

mdx

<Accordion title="I am an Accordion">
  You can put any content in here.
</Accordion>

Accordion Group

Use the <AccordionGroup> component to group multiple accordions together. By default only one item stays open, but you can opt into multi-open behavior with the multi prop.

First Item

Second Item

Third Item

Pass the multi prop to AccordionGroup to keep several accordions open at the same time.

Only One Item Stays Open

Second Item

Keep Multiple Items Open

Default Open Item