Accordion
Use the accordion component to show hidden information based on the collapse and expand state of the child elements
Default accordion
What is Flowbite?
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Is there a Figma file available?
Flowbite 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 classes from Tailwind CSS and components from Flowbite.
What are the differences between Flowbite and Tailwind UI?
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div flowbiteAccordion>
<div
flowbiteAccordionItem
value="accordion-item-1">
<h5 flowbiteAccordionTitle>What is Flowbite?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2">
<h5 flowbiteAccordionTitle>Is there a Figma file available?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite 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>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3">
<h5 flowbiteAccordionTitle>What are the differences between Flowbite and Tailwind UI?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
The main difference is that the core components from Flowbite are open source under the
MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
there is no technical reason stopping you from using the best of two worlds.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Always open
What is Flowbite?
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Is there a Figma file available?
Flowbite 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 classes from Tailwind CSS and components from Flowbite.
What are the differences between Flowbite and Tailwind UI?
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div
flowbiteAccordion
type="multiple">
<div
flowbiteAccordionItem
value="accordion-item-1">
<h5 flowbiteAccordionTitle>What is Flowbite?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2">
<h5 flowbiteAccordionTitle>Is there a Figma file available?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite 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>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3">
<h5 flowbiteAccordionTitle>What are the differences between Flowbite and Tailwind UI?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
The main difference is that the core components from Flowbite are open source under the
MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
there is no technical reason stopping you from using the best of two worlds.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Color option
What is Flowbite?
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Is there a Figma file available?
Flowbite 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 classes from Tailwind CSS and components from Flowbite.
What are the differences between Flowbite and Tailwind UI?
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div
flowbiteAccordion
color="info">
<div
flowbiteAccordionItem
value="accordion-item-1">
<h5 flowbiteAccordionTitle>What is Flowbite?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2">
<h5 flowbiteAccordionTitle>Is there a Figma file available?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite 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>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3">
<h5 flowbiteAccordionTitle>What are the differences between Flowbite and Tailwind UI?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
The main difference is that the core components from Flowbite are open source under the
MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
there is no technical reason stopping you from using the best of two worlds.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Flush accordion
What is Flowbite?
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Is there a Figma file available?
Flowbite 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 classes from Tailwind CSS and components from Flowbite.
What are the differences between Flowbite and Tailwind UI?
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div
flowbiteAccordion
flush>
<div
flowbiteAccordionItem
value="accordion-item-1">
<h5 flowbiteAccordionTitle>What is Flowbite?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2">
<h5 flowbiteAccordionTitle>Is there a Figma file available?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite 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>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3">
<h5 flowbiteAccordionTitle>What are the differences between Flowbite and Tailwind UI?</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
The main difference is that the core components from Flowbite are open source under the
MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
there is no technical reason stopping you from using the best of two worlds.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>Accordion with Icon
What is Flowbite?
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
Is there a Figma file available?
Flowbite 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 classes from Tailwind CSS and components from Flowbite.
What are the differences between Flowbite and Tailwind UI?
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
Learn more about these technologies:
<div flowbiteAccordion>
<div
flowbiteAccordionItem
value="accordion-item-1"
#accordionItem1="flowbiteAccordionItem">
<h5
flowbiteAccordionTitle
class="data-open:*:[flowbite-icon]:rotate-180">
What is Flowbite?
<flowbite-icon
name="chevronDown"
class="size-4 transition-transform duration-150 ease-in-out" />
</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built on top of Tailwind CSS
including buttons, dropdowns, modals, navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="/docs/getting-started/introduction/"
class="text-blue-600 hover:underline dark:text-blue-500">
get started
</a>
and start developing websites even faster with components on top of Tailwind CSS.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-2"
#accordionItem2="flowbiteAccordionItem">
<h5
flowbiteAccordionTitle
class="data-open:*:[flowbite-icon]:rotate-180">
Is there a Figma file available?
<flowbite-icon
name="chevronDown"
class="size-4 transition-transform duration-150 ease-in-out" />
</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite 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>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="https://flowbite.com/figma/"
class="text-blue-600 hover:underline dark:text-blue-500">
Figma design system
</a>
based on the utility classes from Tailwind CSS and components from Flowbite.
</p>
</div>
</div>
</div>
<div
flowbiteAccordionItem
value="accordion-item-3"
#accordionItem3="flowbiteAccordionItem">
<h5
flowbiteAccordionTitle
class="data-open:*:[flowbite-icon]:rotate-180">
What are the differences between Flowbite and Tailwind UI?
<flowbite-icon
name="chevronDown"
class="size-4 transition-transform duration-150 ease-in-out" />
</h5>
<div flowbiteAccordionContent>
<div class="p-5">
<p class="mb-2 text-gray-500 dark:text-gray-400">
The main difference is that the core components from Flowbite are open source under the
MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
there is no technical reason stopping you from using the best of two worlds.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
<li>
<a
href="https://flowbite.com/pro/"
class="text-blue-600 hover:underline dark:text-blue-500">
Flowbite Pro
</a>
</li>
<li>
<a
href="https://tailwindui.com/"
rel="nofollow"
class="text-blue-600 hover:underline dark:text-blue-500">
Tailwind UI
</a>
</li>
</ul>
</div>
</div>
</div>
</div>