Accordion

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

Variants

Copy-ready

Yes

Preview

Semua varian Accordion

Gunakan kontrol ukuran di preview untuk mengecek tampilannya di beberapa breakpoint.

HTML ready

Preview komponen dan kode siap salin.

Default Accordion

Preview responsive

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.

Preview komponen dan kode siap salin.

Bordered Accordion

Preview responsive

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.

Preview komponen dan kode siap salin.

Separated Items

Preview responsive

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.

Kembali ke library untuk melihat kategori komponen lainnya.