Accordion

Use accordions to hide secondary details until readers need them.

Pack versatile layers, comfortable shoes, and one weatherproof jacket.

Arrive 2 hours early for domestic flights and 3 hours for international flights.

Keep liquids in small containers and place them in a clear zip bag.

<AccordionGroup>  <Accordion title="What should I pack for a weekend trip?">    Pack versatile layers, comfortable shoes, and one weatherproof jacket.  </Accordion>  <Accordion title="How early should I arrive at the airport?">    Arrive 2 hours early for domestic flights and 3 hours for international flights.  </Accordion>  <Accordion title="What can I bring in a carry-on?">    Keep liquids in small containers and place them in a clear zip bag.  </Accordion></AccordionGroup>

Choose interaction behavior

Decide the open and close behavior first, then choose your structure.

Independent accordions (no group)

Place multiple Accordion components one after another to let readers open any combination.

Composting turns food scraps and yard waste into nutrient-rich soil.

Check soil moisture first, then water when the top inch feels dry.

Yes. Place them near bright light and rotate pots every few days.

<Accordion title="What is composting?">  Composting turns food scraps and yard waste into nutrient-rich soil.</Accordion> <Accordion title="How often should I water herbs?">  Check soil moisture first, then water when the top inch feels dry.</Accordion> <Accordion title="Can I grow herbs indoors?">  Yes. Place them near bright light and rotate pots every few days.</Accordion>

Dependent accordions (single-open group)

Wrap items in AccordionGroup when opening one item should close the currently open item.

Choose easy-to-care-for indoor plants such as pothos or snake plants.

Try herbs that need steady sun and regular trimming.

Grow species that need humidity control and seasonal pruning.

<AccordionGroup>  <Accordion title="Beginner">    Choose easy-to-care-for indoor plants such as pothos or snake plants.  </Accordion>  <Accordion title="Intermediate">    Try herbs that need steady sun and regular trimming.  </Accordion>  <Accordion title="Advanced">    Grow species that need humidity control and seasonal pruning.  </Accordion></AccordionGroup>

Start an accordion open

Set defaultOpen to start a standalone accordion in the open state.

Water deeply, then wait until the soil is fully dry before watering again.

<Accordion title="How do I water succulents?" defaultOpen>  Water deeply, then wait until the soil is fully dry before watering again.</Accordion>

Appearance

Add an icon

Use icon to display an icon next to the accordion title.

Keep your passport, ticket, charger, and medications in one small pouch.

<Accordion title="Travel checklist" icon="lucide:check-circle">  Keep your passport, ticket, charger, and medications in one small pouch.</Accordion>

Change title size

Use titleSize to adjust the heading size.

This is an example of a title with size xs.

This is an example of a title with size sm.

This is an example of a title with size lg.

This is an example of a title with size xl.

This is an example of a title with size 2xl.

 <Accordion title='Title size — "xs"' titleSize="xs">  This is an example of a title with size `xs`.</Accordion><Accordion title='Title size — "sm"' titleSize="sm">  This is an example of a title with size `sm`.</Accordion><Accordion title='Title size — "lg"' titleSize="lg">  This is an example of a title with size `lg`.</Accordion><Accordion title='Title size — "xl"' titleSize="xl">  This is an example of a title with size `xl`.</Accordion> <Accordion title='Title size — "2xl"' titleSize="2xl">  This is an example of a title with size `2xl`.</Accordion>

Props

Prop	Description	Type	Default
`title`	Text shown in the accordion header.	`string`	—
`icon`	Optional icon name, for example `lucide:check-circle`.	`string`	—
`defaultOpen`	Starts open for standalone accordions.	`boolean`	`false`
`titleSize`	Optional size for the title text.	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`