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
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.
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
Props
| Prop | Type | Default | Description |
|---|
title | string | - | Required. The text displayed in the accordion header. |
children | ReactNode | null | The content to be displayed when the accordion is expanded. Can be plain text, markdown, or React components. |
icon | string | undefined | Optional. Adds a Lucide icon before the title in the accordion header. |
Output Markdown
<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>