Introduction Quickstart License Ng Primitives
Theming Override base style Use custom style Dark mode
Accordion Alert Badge Breadcrumb Button Card Clipboard Dropdown Icon Indicator Input field Modal Navbar Pagination Sidebar Tab Table Tooltip
API Reference
Components Accordion

Accordion

Use the accordion component to show hidden information based on the collapse and expand state of the child elements

Default accordion

html
typescript 
<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

html
typescript 
<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

html
typescript 
<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

html
typescript 
<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

html
typescript 
<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>

Themes

Accordion theme

{
  "host": {
    "base": "shadow-sm",
    "transition": ""
  }
}

Accordion item content

{
  "host": {
    "base": "group/item",
    "transition": ""
  }
}

Accordion title theme

{
  "host": {
    "base": "flex w-full cursor-pointer flex-row items-center justify-between p-5 text-base font-medium group-first/item:rounded-t-lg",
    "transition": "",
    "color": {
      "default": {
        "light": "border-gray-200 bg-gray-100 text-gray-900 data-hover:bg-gray-200",
        "dark": "dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:data-hover:bg-gray-700"
      },
      "info": {
        "light": "border-blue-200 bg-blue-100 text-blue-900 data-hover:bg-blue-200",
        "dark": "dark:border-blue-700 dark:bg-blue-800 dark:text-white dark:data-hover:bg-blue-700"
      },
      "failure": {
        "light": "border-red-200 bg-red-100 text-red-900 data-hover:bg-red-200",
        "dark": "dark:border-red-700 dark:bg-red-800 dark:text-white dark:data-hover:bg-red-700"
      },
      "success": {
        "light": "border-green-200 bg-green-100 text-green-900 data-hover:bg-green-200",
        "dark": "dark:border-green-700 dark:bg-green-800 dark:text-white dark:data-hover:bg-green-700"
      },
      "warning": {
        "light": "border-yellow-200 bg-yellow-100 text-yellow-900 data-hover:bg-yellow-200",
        "dark": "dark:border-yellow-700 dark:bg-yellow-800 dark:text-white dark:data-hover:bg-yellow-700"
      },
      "primary": {
        "light": "border-primary-200 bg-primary-100 text-primary-900 data-hover:bg-primary-200",
        "dark": "dark:border-primary-700 dark:bg-primary-800 dark:data-hover:bg-primary-700 dark:text-white"
      }
    },
    "flush": {
      "on": "border-b bg-transparent data-hover:bg-transparent dark:bg-transparent dark:data-hover:bg-transparent",
      "off": "border"
    }
  }
}

Accordion content

{
  "host": {
    "base": "overflow-hidden",
    "transition": "",
    "color": {
      "default": {
        "light": "border-gray-200 bg-white",
        "dark": "dark:border-gray-700 dark:bg-gray-900"
      },
      "info": {
        "light": "border-blue-200 bg-white",
        "dark": "dark:border-blue-700 dark:bg-gray-900"
      },
      "failure": {
        "light": "border-red-200 bg-white",
        "dark": "dark:border-red-700 dark:bg-gray-900"
      },
      "success": {
        "light": "border-green-200 bg-white",
        "dark": "dark:border-green-700 dark:bg-gray-900"
      },
      "warning": {
        "light": "border-yellow-200 bg-white",
        "dark": "dark:border-yellow-700 dark:bg-gray-900"
      },
      "primary": {
        "light": "border-primary-200 bg-white",
        "dark": "dark:border-primary-700 dark:bg-gray-900"
      }
    },
    "open": {
      "on": "h-fit",
      "off": "h-0"
    },
    "flush": {
      "on": "bg-transparent dark:bg-transparent",
      "off": "border-x group-last/item:border-b"
    }
  }
}
Previous
Dark mode
Next
Alert
Flowbite Logo Flowbite

© 2019-2025 Flowbite™ is a registered trademark. All Rights Reserved.