Accordion

A component used to create collapsible content that can be hidden and shown again.

Basic Usage

plaintext
<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.
</Accordion>

Render as :

With Icon

plaintext
<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
        }
    }
    ```
</Accordion>

Render as :

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.
Edit this page

Last updated Jun 15, 2026