- Docs
- Components
- Accordion
Accordion
A component used to create collapsible content that can be hidden and shown again.
Basic Usage
md
:::accordion{title="Click to expand"}
This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
:::
Render as :
This is a simple accordion component that can be toggled by clicking the header. The content can include any valid React nodes, including text, components, and markdown.
With Icon
md
:::accordion{title="Code Block" icon="Code"}
javascript:main.js showLineNumbers {3-4}
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
:::
Render as :
main.js
function isRocketAboutToCrash() {
// Check if the rocket is stable
if (!isStable()) {
NoCrash(); // Prevent the crash
}
}
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. |
Last updated Aug 13, 2026