Accordion

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

Preview

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 :

With Code Block

<Accordion title="Code Block" defaultOpen={true} 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.
defaultOpenbooleanfalseWhen true, the accordion will be expanded by default.
iconstringundefinedOptional. Adds a Lucide icon before the title in the accordion header.
Edit this page

Published on Dec 22, 2024