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

You can put other components inside Accordions.

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

Writing 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="Expanded by Default" defaultOpen>
    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>

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.
defaultOpenbooleanfalseWhen true, the accordion will be expanded by default.
iconstringundefinedOptional. Adds a Lucide icon before the title in the accordion header.
Edit this page

Published on Aug 10, 2025