Accordion Examples

Basic Usage
Basic accordion with default chevron icons. Use the heading prop for the button text and slot for content.
Custom Icons
Use icon prop to set custom Font Awesome icons. Icon rotates 45 degrees when opened.
Custom Icon with Color
This item uses a custom star icon with purple color for both heading and icon.
Disabled Item
Use disabled prop to prevent an item from being opened. The item becomes non-interactive.
Expanded by Default
Use expanded prop to make an item start in an open state when the page loads.
Purple Color
This item uses purple color for both heading and icon.
Orange Color
This item uses orange color for both heading and icon.
Cyan Color
This item uses cyan color for both heading and icon.

Exclusive Mode

Exclusive Mode
Use exclusive prop to allow only one item open at a time. Opening one item automatically closes others.
Second Item
When you open this item, the first item will automatically close because exclusive mode is enabled.
Third Item
Only one item can be open at a time in exclusive mode. Try opening different items to see the effect.

Reverse Layout

Reverse Layout
Use reverse prop to display icons before the heading instead of after.
Icon on Left
Icons appear on the left side when reverse mode is enabled.
Custom Icon
Custom icons also appear on the left in reverse mode.

Documentation

Accordion Props

  • exclusive - bool

    Only one item can be open at a time

  • reverse - bool

    Display icon before heading instead of after

Accordion Item Props

  • heading - string

    The text displayed in the accordion button

  • expanded - bool

    Item starts in an open state

  • disabled - bool

    Disable the item

  • icon - string

    Custom Font Awesome icon name. Rotates 45° when opened.

  • color - string

    Tailwind CSS color name for heading and icon. Default: theme color.