Accordion

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

Basic Usage

<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 :

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

<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 :

main.js
function isRocketAboutToCrash() {
    // Check if the rocket is stable
    if (!isStable()) {
        NoCrash(); // Prevent the crash
    }
}

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

Published on Dec 22, 2024