Accordion Group

for writing multiple accordions and grouping them together

An accordion is like a button that opens and closes information. To avoid clutter, long information can be hidden first and then revealed when clicked.

Note

Group related accordions together using <AccordionGroup>. This creates a cohesive section of accordions that can be individually expanded or collapsed.

Usage

example of using regular paragraph content inside the accordion component

This accordion includes a Lucide Icon because the icon prop is provided.

You can put other components inside Accordions.

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

Props

PropTypeDefaultDescription
titlestring-Required. The text displayed in the accordion header.
childrenReactNodenullThe content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components.
iconstringundefinedOptional. Adds a Lucide icon before the title in the accordion header.

Output Markdown

<AccordionGroup>
<Accordion title="Basic Usage">
    This accordion includes a [Lucide Icon](https://lucide.dev/icons/) because the `icon` prop is provided.
</Accordion>

<Accordion title="With icon props" icon="MousePointerClick">
    This accordion includes a Lucide icon because the `icon` prop is provided.
</Accordion>

<Accordion title="With Code Block">
    You can put other components inside Accordions.
```jsx:helloword.jsx
class HelloWorld {
public static void main(String[] args) {
        System.out.println("Hello, World!");
        }
}
```
</Accordion>
</AccordionGroup>
Edit this page

Published on Aug 10, 2025