Accordions

Collapsible components to show and hide content

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

Single accordion

I am an 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.

Getting started

You can put other components inside Accordions.

HelloWorld.java

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

Advanced features

Add icons to make accordions more visually distinct and scannable.

Troubleshooting

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>

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.

icon · string

The icon to display.

Options:

• Font Awesome icon name
• Lucide icon name
• JSX-compatible SVG code wrapped in curly braces
• URL to an externally hosted icon
• Path to an icon file in your project

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.