Accordion

Collapsible content sections

Accordions let users expand and collapse content sections.

Basic Accordion

This content is hidden until the accordion is expanded.

You can include any content here: text, code, images, or other components.

With Description

Add a subtitle with the description prop:

Documentation for authentication API endpoints goes here.

Default Open

Start expanded with defaultOpen:

This accordion starts in the open state.

With Icon

Configuration options and settings.

Accordion Group

Group related accordions together:

Introduction and setup instructions.

Configuration options and settings.

Common issues and solutions.

Props

PropTypeDefaultDescription
titlestringRequiredAccordion header text
descriptionstring-Subtitle below title
iconstring-Font Awesome icon name
iconTypestringlightIcon style (light, regular, solid)
defaultOpenbooleanfalseStart in expanded state

Was this page helpful?