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”

Use AccordionGroup to create a group of Accordions.

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.