1. Home
  2. Components
  3. Accordion
Back to components

Accordion

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

Variants

3

Copy-ready

Yes

Preview

Semua varian Accordion

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

HTML ready
01

Default Accordion

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.
02

Bordered Accordion

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.
03

Separated Items

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.

Butuh komponen lain?

Kembali ke library untuk melihat kategori komponen lainnya.

Browse components