Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Default Accordion

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern. You can fully customize it using Tailwind CSS utility classes.

Is it styled?

It comes with default styles that matches the other components' aesthetic.

Is it interactive?

Yes, it uses the native

and

HTML elements for full interactivity without JavaScript.

Can I use it in React?

Yes. It adheres to the WAI-ARIA design pattern. You can fully customize it using Tailwind CSS utility classes.

Can I use it in plain HTML?

Absolutely. Copy the code and paste it into any HTML file. It works out of the box.

Item 1

This item is separated from the others with its own border and background.

Item 2

Useful for frequently asked questions (FAQ) sections.

Item 3

You can stack as many as you need.