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.

Usage

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

plaintext
<Accordions>
<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>
</Accordions>
Edit this page

Last updated May 5, 2026