Skip to content
Docs
💻 | Components
Accordion

Accordion Component

An accordion in a webpage is a graphical element that allows for the vertical expansion and contraction of content sections, allowing users to toggle between showing or hiding content.

Accordion

What is web-ui-kit?

web-ui-kit is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.

Is there a Figma file available?

web-ui-kit is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.

Check out the Figma design systembased on the utility classes from Tailwind CSS and components from web-ui-kit.

What are the differences between web-ui-kit and Tailwind UI?

The main difference is that the core components from web-ui-kit are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that web-ui-kit relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.

However, we actually recommend using both web-ui-kit, web-ui-kit Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.

1<div class="bg-gray-200 p-5">
2    <div class="relative my-1 rounded-md border border-gray-300">
3      <input type="checkbox" class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-300 p-5 opacity-0" />
4      <div class="cursor-pointer rounded-md bg-white p-5">What is web-ui-kit?</div>
5      <div class="absolute right-3 top-3 rotate-90 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-blue-500 peer-checked:text-black peer-checked:transition-all peer-checked:duration-500">
6        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
7          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
8        </svg>
9      </div>
10      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
11        <p class="p-4 text-black">web-ui-kit is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
12      </div>
13    </div>
14  
15    <div class="relative my-1 rounded-md border border-gray-300">
16      <input type="checkbox" class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-300 p-5 opacity-0" />
17      <div class="cursor-pointer rounded-md bg-white p-5 pr-10">Is there a Figma file available?</div>
18      <div class="absolute right-3 top-3 rotate-90 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-blue-500 peer-checked:text-black peer-checked:transition-all peer-checked:duration-500">
19        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
20          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
21        </svg>
22      </div>
23      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
24        <p class="p-4 text-black">web-ui-kit is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
25        <p class="p-4 text-black">Check out the <a href="https://clueless.tech" class="underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from web-ui-kit.</p>
26      </div>
27    </div>
28    <div class="relative my-1 rounded-md border border-gray-300">
29      <input type="checkbox" class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-300 p-5 opacity-0" />
30      <div class="cursor-pointer rounded-md bg-white p-5 pr-14">What are the differences between web-ui-kit and Tailwind UI?</div>
31      <div class="absolute right-3 top-3 rotate-90 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-blue-500 peer-checked:text-black peer-checked:transition-all peer-checked:duration-500">
32        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
33          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
34        </svg>
35      </div>
36      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
37        <p class="p-4 text-black">The main difference is that the core components from web-ui-kit are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that web-ui-kit relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
38        <p class="p-4 text-black">However, we actually recommend using both web-ui-kit, web-ui-kit Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
39      </div>
40    </div>
41  </div>

Auto Close Accordion

What is web-ui-kit

web-ui-kit is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.

Is there a Figma file available?

web-ui-kit is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.

Check out the Figma design system based on the utility classNamees from Tailwind CSS and components from web-ui-kit.

What are the differences between web-ui-kit and Tailwind ?

The main difference is that the core components from web-ui-kit are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that web-ui-kit relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.

However, we actually recommend using both web-ui-kit, web-ui-kit Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.

1
2<div class="accordion bg-slate-900 p-5">
3  <div class="relative my-1">
4    <input class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-500 p-5 opacity-0" type="radio" name="panel" id="panel-1" checked />
5
6    <div class="cursor-pointer rounded-md bg-white p-5">What is web-ui-kit</div>
7
8    <div class="absolute right-3 top-3 rotate-90 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-slate-900 peer-checked:text-white">
9      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
10        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
11      </svg>
12    </div>
13
14    <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
15      <p class="p-4 text-white">web-ui-kit is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
16    </div>
17  </div>
18
19  <div class="relative my-1">
20    <input class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-300 p-5 opacity-0" type="radio" name="panel" id="panel-2" />
21
22    <div class="cursor-pointer rounded-md bg-white p-5">Is there a Figma file available?</div>
23
24    <div class="absolute right-3 top-3 rotate-90 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-slate-900 peer-checked:text-white">
25      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
26        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
27      </svg>
28    </div>
29
30    <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
31      <p class="p-4 text-white">web-ui-kit is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
32      <p class="p-4 text-white">Check out the <a href="https://clueless.tech" class="underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from web-ui-kit.</p>
33    </div>
34  </div>
35  <div class="relative my-1">
36    <input class="peer absolute left-0 top-0 h-16 w-full cursor-pointer bg-red-300 p-5 opacity-0" type="radio" name="panel" id="panel-3" />
37
38    <div class="cursor-pointer rounded-md bg-white p-5">What are the differences between web-ui-kit and Tailwind ?</div>
39
40    <div class="absolute right-3 top-3 rotate-90 rounded-full border p-2 shadow-md duration-500 peer-checked:-rotate-90 peer-checked:rounded-full peer-checked:bg-slate-900 peer-checked:text-white">
41      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5">
42        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
43      </svg>
44    </div>
45
46    <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
47      <p class="p-4 text-white">The main difference is that the core components from web-ui-kit are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that web-ui-kit relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
48      <p class="p-4 text-white">However, we actually recommend using both web-ui-kit, web-ui-kit Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
49    </div>
50  </div>
51</div>
🚀 Getting StartedAlerts