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>

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.

Assistant

Responses are generated using AI and may contain mistakes.