Accordions

A dropdown component to toggle content visibility

I am an Accordion.

You can put any content in here, including other components, like code:

HelloWorld.java

 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
 }

Accordion Example

<Accordion title="I am an Accordion.">
  You can put any content in here, including other components, like code:

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
  ```
</Accordion>

<AccordionGroup>
  <Accordion title="FAQ without Icon">
    You can put other components inside Accordions.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```

    Check out the [Accordion](/components/accordions) docs for all the supported props.
  </Accordion>

  <Accordion title="FAQ with Icon" icon="alien-8bit">
    Check out the [Accordion](/components/accordions) docs for all the supported props.
  </Accordion>

  <Accordion title="FAQ without Icon">
    Check out the [Accordion](/components/accordions) docs for all the supported props.
  </Accordion>
</AccordionGroup>

Props

title · string · required

Title in the Accordion preview.

description · string

Detail below the title in the Accordion preview.

defaultOpen · boolean · default: "false"

Whether the Accordion is open by default.

icon · string or svg

A Font Awesome icon, Lucide icon, or SVG code

iconType · string

One of “regular”, “solid”, “light”, “thin”, “sharp-solid”, “duotone”, or “brands”

Accordion Groups

You can group multiple accordions into a single display. Simply add <AccordionGroup> around your existing <Accordion> components.

FAQ without Icon

You can put other components inside Accordions.

HelloWorld.java

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Check out the Accordion docs for all the supported props.

FAQ with Icon

Check out the Accordion docs for all the supported props.

FAQ without Icon

Check out the Accordion docs for all the supported props.