---
title: Accordion
description: Use Accordion and AccordionGroup to organize content into collapsible sections.
---

Use accordions to hide secondary details until readers need them.

<ComponentPreview>
  ```mdx
  <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>
  ```
</ComponentPreview>

## Choose interaction behavior

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

<Callout type="info" title="Independent vs dependent behavior">
  Use multiple standalone `Accordion` components together when each item should
  keep its own open and close state. Use `AccordionGroup` when items should share
  state and only one accordion stays open at a time.
</Callout>

### Independent accordions (no group)

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

<ComponentPreview showAllCode>
  ```mdx
  <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>
  ```
</ComponentPreview>

### Dependent accordions (single-open group)

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

<ComponentPreview showAllCode>
  ```mdx
  <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>
  ```
</ComponentPreview>

### Start an accordion open

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

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

## Appearance

### Add an icon

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

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

### Change title size

Use `titleSize` to adjust the heading size.

<ComponentPreview>
  ```mdx
  <AccordionGroup>
    <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>
  </AccordionGroup>
  ```
</ComponentPreview>

## 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"`, or `"2xl"` | `"md"`  |