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
 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
 }
Accordion example
<Accordion title="I am an Accordion.">
  You can put any content in here, including other components, like code:

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
  ```
</Accordion>

​
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
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
Add icons to make accordions more visually distinct and scannable.
Keep related content organized into groups.
Accordion Group Example
<AccordionGroup>
  <Accordion title="Getting started">
    You can put other components inside Accordions.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </Accordion>

  <Accordion title="Advanced features" icon="alien-8bit">
    Add icons to make accordions more visually distinct and scannable.
  </Accordion>

  <Accordion title="Troubleshooting">
    Keep related content organized into groups.
  </Accordion>
</AccordionGroup>

​
Deep linking

Each accordion generates an anchor based on its title (or a custom id). When a user opens an accordion, the URL updates with the anchor hash and is copied to the clipboard. Navigating to a URL with an accordion’s hash automatically opens the accordion and scrolls it into view. For nested accordions, the hash uses a : separator to represent the hierarchy. For example, #parent:child opens both the parent and child accordions.

​
Nested accordions

You can nest accordions inside one another. Child accordions work independently from their parent, supporting deep-linking through the full nesting path.
This content is inside a nested accordion.
Nested accordion example
<Accordion title="Parent accordion">
  <Accordion title="Nested child accordion">
    This content is inside a nested accordion.
  </Accordion>
</Accordion>

​
Properties

​
title
string
required
Title in the Accordion preview.
​
description
string
Detail below the title in the Accordion preview.
​
defaultOpen
boolean
default:"false"
Whether the Accordion is open by default.
​
id
string
A custom ID for the accordion used for anchor linking. If omitted, a slug is generated from the title.
​
icon
string
The icon to display.Options:
  • Font Awesome icon name, if you have the icons.library property set to fontawesome in your docs.json
  • Lucide icon name, if you have the icons.library property set to lucide in your docs.json
  • Tabler icon name, if you have the icons.library property set to tabler in your docs.json
  • URL to an externally hosted icon
  • Path to an icon file in your project
  • SVG code wrapped in curly braces
For custom SVG icons:
  1. Convert your SVG using the SVGR converter.
  2. Paste your SVG code into the SVG input field.
  3. Copy the complete <svg>...</svg> element from the JSX output field.
  4. Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
  5. Adjust height and width as needed.
​
iconType
string
The Font Awesome icon style. Only used with Font Awesome icons.Options: regular, solid, light, thin, sharp-solid, duotone, brands.