Accordions

The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information.

Do you have any social accounts?

Yes! You can find Wind UI in many social platforms, such as Facebook, Discord, Reddit and many more, which you can find on our footer under Socials.

How can I communicate with your support team?

You can communicate with our team for support through our discord channel. Once you have asked your question, one of our team members will answer you as soon as possible.

Do you have a newsletter?

Of course! You can join our community through our newsletter which is located on the bottom of every page on our website.

Is there any other way of communication?

You can always communicate with us through our social accounts and email address at info@wind-ui.com.

Variations

Basic Accordion

Copy as:HTMLReact

How does TailwindCSS works?

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for className names, generating the corresponding styles and then writing them to a static CSS file.

How do I install TailwindCSS?

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js. Install tailwindcss via npm, and create your tailwind.config.js file.

What is Wind UI about?

Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app. Just copy and paste them on your Tailwind CSS project.

How do I use Wind UI components?

All components can be copied and pasted and easily implemented in your tailwind css projects. You can choose which language you want to copy the desired component and just hover and click on the component you need and paste it on your project.

copydone

<!-- Component: Basic accordion -->
<section class="w-full divide-y rounded divide-slate-200 ">
  <details class="p-4 group" open>
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      How does TailwindCSS works?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac01 desc-ac01">
        <title id="title-ac01">Open icon</title>
        <desc id="desc-ac01">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      How do I install TailwindCSS?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac02 desc-ac02">
        <title id="title-ac02">Open icon</title>
        <desc id="desc-ac02">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js. Install tailwindcss via npm, and create your tailwind.config.js file.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      What is Wind UI about?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac03 desc-ac03">
        <title id="title-ac03">Open icon</title>
        <desc id="desc-ac03">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app. Just copy and paste them on your Tailwind CSS project.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      How do I use Wind UI components?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac04 desc-ac04">
        <title id="title-ac04">Open icon</title>
        <desc id="desc-ac04">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      All components can be copied and pasted and easily implemented in your tailwind css projects. You can choose which language you want to copy the desired component and just hover and click on the component you need and paste it on your project.
    </p>
  </details>
</section>
<!-- End Basic accordion -->

Basic Accordion with Icons

Copy as:HTMLReact

What browsers are supported?

The components in Wind UI are designed to work in the latest, stable releases of all major browsers, including Chrome, Firefox, Safari, and Edge.

Are the components only available in green?

All components are easily customizable to match your own project.

Is WindUi open source?

WindUI is not an open source project yet, but we don't guarantee that it won't become in the future.

How can I help improve WindUI?

You can help our team improve WindUI by giving us feedback on our discord channel.

copydone

<!-- Component: Icon accordion -->
<section class="w-full divide-y rounded divide-slate-200">
  <details class="p-4 group" open>
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none group-hover:text-slate-800">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500  shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac05 desc-ac05">
        <title id="title-ac05">Leading icon</title>
        <desc id="desc-ac05">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 8.25V18a2.25 2.25 0 002.25 2.25h13.5A2.25 2.25 0 0021 18V8.25m-18 0V6a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6zM7.5 6h.008v.008H7.5V6zm2.25 0h.008v.008H9.75V6z" />
      </svg>
      What browsers are supported?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac06 desc-ac06">
        <title id="title-ac06">Open icon</title>
        <desc id="desc-ac06">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      The components in Wind UI are designed to work in the latest, stable releases of all major browsers, including Chrome, Firefox, Safari, and Edge.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none group-hover:text-slate-800">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500  shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac07 desc-ac07">
        <title id="title-ac07">Leading icon</title>
        <desc id="desc-ac07">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z" />
      </svg>
      Are the components only available in green?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac08 desc-ac08">
        <title id="title-ac08">Open icon</title>
        <desc id="desc-ac08">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      All components are easily customizable to match your own project.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none group-hover:text-slate-800">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500  shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac09 desc-ac09">
        <title id="title-ac09">Leading icon</title>
        <desc id="desc-ac09">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
      </svg>
      Is WindUi open source?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac10 desc-ac10">
        <title id="title-ac10">Open icon</title>
        <desc id="desc-ac10">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      WindUI is not an open source project yet, but we don't guarantee that it won't become in the future.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none group-hover:text-slate-800">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500  shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac11 desc-ac11">
        <title id="title-ac11">Leading icon</title>
        <desc id="desc-ac11">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
      </svg>
      How can I help improve WindUI?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac12 desc-ac12">
        <title id="title-ac12">Open icon</title>
        <desc id="desc-ac12">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      You can help our team improve WindUI by giving us feedback on our discord channel.
    </p>
  </details>
</section>
<!-- End Icon accordion -->

Outline Accordion

Copy as:HTMLReact

Which languages are available for the components?

Wind UI team currently releases it's components on HTML and React, but also thinking on adding more in the future. You can easily toggle between the two languages through the code blocks, on each page component.

Which icons are you using in the components?

All our icons related ui components are using, heroicons SVG icons, by the makers of Tailwind CSS.

How can I learn about the latest changes?

You can find all latest additions and updates in our Changelog page, where we have a detailed timeline for any changes.

Where can I find the official TailwindCSS documentation?

You can find the official TailwindCSS detailed documentation as well as the official TailwindCSS website link on our footer under Resources.

copydone

<!-- Component: Outline accordion -->
<section class="w-full bg-white border divide-y rounded divide-slate-200 border-slate-200">
  <details class="p-4 group" open>
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      Which languages are available for the components?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac21 desc-ac21">
        <title id="title-ac21">Open icon</title>
        <desc id="desc-ac21">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      Wind UI team currently releases it's components on HTML and React, but also thinking on adding more in the future. You can easily toggle between the two languages through the code blocks, on each page component.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      Which icons are you using in the components?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac22 desc-ac22">
        <title id="title-ac22">Open icon</title>
        <desc id="desc-ac22">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      All our icons related ui components are using, heroicons SVG icons, by the makers of Tailwind CSS.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      How can I learn about the latest changes?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac24 desc-ac24">
        <title id="title-ac24">Open icon</title>
        <desc id="desc-ac24">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      You can find all latest additions and updates in our Changelog page, where we have a detailed timeline for any changes.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      Where can I find the official TailwindCSS documentation?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac23 desc-ac23">
        <title id="title-ac23">Open icon</title>
        <desc id="desc-ac23">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      You can find the official TailwindCSS detailed documentation as well as the official TailwindCSS website link on our footer under Resources.
    </p>
  </details>
</section>
<!-- End Outlined accordion -->

Outline Accordion with Icons

Copy as:HTMLReact

Do you have any social accounts?

Yes! You can find Wind UI in many social platforms, such as Facebook, Discord, Reddit and many more, which you can find on our footer under Socials.

How can I communicate with your support team?

You can communicate with our team for support through our discord channel. Once you have asked your question, one of our team members will answer you as soon as possible.

Do you have a newsletter?

Of course! You can join our community through our newsletter which is located on the bottom of every page on our website.

Is there any other way of communication?

You can always communicate with us through our social accounts and email address at info@wind-ui.com.

copydone

<!-- Component: Outline accordion with icons -->
<section class="w-full bg-white border divide-y rounded divide-slate-200 border-slate-200">
  <details class="p-4 group" open>
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500  shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac25 desc-ac25">
        <title id="title-ac25">Leading icon</title>
        <desc id="desc-ac25">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
      </svg>
      Do you have any social accounts?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac26 desc-ac26">
        <title id="title-ac26">Open icon</title>
        <desc id="desc-ac26">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      Yes! You can find Wind UI in many social platforms, such as Facebook, Discord, Reddit and many more, which you can find on our footer under Socials.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500  shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac27 desc-ac27">
        <title id="title-ac27">Leading icon</title>
        <desc id="desc-ac27">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" />
      </svg>
      How can I communicate with your support team?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac28 desc-ac28">
        <title id="title-ac28">Open icon</title>
        <desc id="desc-ac28">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      You can communicate with our team for support through our discord channel. Once you have asked your question, one of our team members will answer you as soon as possible.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500  shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac29 desc-ac29">
        <title id="title-ac29">Leading icon</title>
        <desc id="desc-ac29">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
      </svg>
      Do you have a newsletter?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac30 desc-ac30">
        <title id="title-ac30">Open icon</title>
        <desc id="desc-ac30">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      Of course! You can join our community through our newsletter which is located on the bottom of every page on our website.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500  shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac31 desc-ac31">
        <title id="title-ac31">Leading icon</title>
        <desc id="desc-ac31">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
      </svg>
      Is there any other way of communication?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac32 desc-ac32">
        <title id="title-ac32">Open icon</title>
        <desc id="desc-ac32">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      You can always communicate with us through our social accounts and email address at info@wind-ui.com.
    </p>
  </details>
</section>
<!-- End Outline accordion with icons -->

Elevated Accordion

Copy as:HTMLReact

How do I know what comes next?

Whenever the team is brewing something new, you will be able to find it, grayed out, on the main component page as well as the websites side navigation. The new component name will be there with a "coming next" badge.

How do I know what is new?

You will always get notified about new components through our discord and other social accounts. You can also see the newest components on the main component page as well as the websites side navigation with a "new" badge next to their name.

How do I know what is updated?

All updated components will be accompanied by an "updated" badge. YOu will be able to see that on our main components page as well as our side navigation.

How will I know about any major releases or news?

You will get notified by us about any major news or releases through our newsletter and our social accounts.

copydone

<!-- Component: Elevated accordion -->
<section class="w-full bg-white divide-y rounded shadow-md divide-slate-200 shadow-slate-200">
  <details class="p-4 group" open>
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      How do I know what comes next?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac13 desc-ac13">
        <title id="title-ac13">Open icon</title>
        <desc id="desc-ac13">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      Whenever the team is brewing something new, you will be able to find it, grayed out, on the main component page as well as the websites side navigation. The new component name will be there with a "coming next" badge.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      How do I know what is new?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac14 desc-ac14">
        <title id="title-ac14">Open icon</title>
        <desc id="desc-ac14">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      You will always get notified about new components through our discord and other social accounts. You can also see the newest components on the main component page as well as the websites side navigation with a "new" badge next to their name.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      How do I know what is updated?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac15 desc-ac15">
        <title id="title-ac15">Open icon</title>
        <desc id="desc-ac15">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      All updated components will be accompanied by an "updated" badge. YOu will be able to see that on our main components page as well as our side navigation.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      How will I know about any major releases or news?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac16 desc-ac16">
        <title id="title-ac16">Open icon</title>
        <desc id="desc-ac16">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      You will get notified by us about any major news or releases through our newsletter and our social accounts.
    </p>
  </details>
</section>
<!-- End Elevated accordion -->

Elevated Accordion with Icons

Copy as:HTMLReact

How do I use Wind UI components?

What do you mean by accessible components?

All components come with proper attributes to ensure full accessibility with the WAI-ARIA standards. Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.

What do you mean about fully responsive?

Every component is fully responsive and implemented to look great at any screen size.

Which version of TailwindCSS are you using for the components?

Our team has used the currently latest TailwindCSS version. The code is used in its original form without any customization or third party dependencies.

copydone

<!-- Component: Elevated accordion with icons -->
<section class="w-full bg-white divide-y rounded shadow-md divide-slate-200 shadow-slate-200">
  <details class="p-4 group" open>
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac05 desc-ac05">
        <title id="title-ac05">Leading icon</title>
        <desc id="desc-ac05">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
      </svg>
      How do I use Wind UI components?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac06 desc-ac06">
        <title id="title-ac06">Open icon</title>
        <desc id="desc-ac06">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      All components can be copied and pasted and easily implemented in your tailwind css projects. You can choose which language you want to copy the desired component and just hover and click on the component you need and paste it on your project.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac07 desc-ac07">
        <title id="title-ac07">Leading icon</title>
        <desc id="desc-ac07">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
      </svg>
      What do you mean by accessible components?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac08 desc-ac08">
        <title id="title-ac08">Open icon</title>
        <desc id="desc-ac08">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      All components come with proper attributes to ensure full accessibility with the WAI-ARIA standards. Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac09 desc-ac09">
        <title id="title-ac09">Leading icon</title>
        <desc id="desc-ac09">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
      </svg>
      What do you mean about fully responsive?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac10 desc-ac10">
        <title id="title-ac10">Open icon</title>
        <desc id="desc-ac10">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      Every component is fully responsive and implemented to look great at any screen size.
    </p>
  </details>
  <details class="p-4 group">
    <summary class="[&::-webkit-details-marker]:hidden relative flex gap-4 pr-8 font-medium list-none cursor-pointer text-slate-700 focus-visible:outline-none transition-colors duration-300 group-hover:text-slate-900 ">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac11 desc-ac11">
        <title id="title-ac11">Leading icon</title>
        <desc id="desc-ac11">Icon that describes the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
      </svg>
      Which version of TailwindCSS are you using for the components?
      <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-0 w-4 h-4 transition duration-300 top-1 stroke-slate-700 shrink-0 group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-ac12 desc-ac12">
        <title id="title-ac12">Open icon</title>
        <desc id="desc-ac12">icon that represents the state of the summary</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
      </svg>
    </summary>
    <p class="mt-4 text-slate-500">
      Our team has used the currently latest TailwindCSS version. The code is used in its original form without any customization or third party dependencies.
    </p>
  </details>
</section>
<!-- End Elevated accordion with icons -->

Usage

The accordion component is used to deliver large amounts of content in a small space through progressive disclosure.

To implement the accordion the native <summary> HTML element is used. Contents can be any heading content, plain text, or HTML that can be used within a paragraph.

A <summary> element may only be used as the first child of a <details> element. When the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details>element, which can be used to let you know when this state change occurs.

Specs

Each accordion is wrapped within a <details> element with a 1rem (16px) internal padding and can consist of:

Summary: the title of the component. Font size of 1rem (16px) and 500 font-weight. It can also have an icon of 1.5rem (24px) in width and height.
Content: Any HTML content.

Accessibility notes

Since accordions are built with the native <details> element no additional accessibility roles are required.

Accordions

Variations

Basic Accordion

Basic Accordion with Icons

Outline Accordion

Outline Accordion with Icons

Elevated Accordion

Elevated Accordion with Icons

Usage

Specs

Accessibility notes

Check out the latest release!