React Accordion - Flowbite

Use the accordion component and its options to expand and collapse the content inside each panel based on state reactivity from React and Tailwind CSS

The accordion component from Flowbite React can be used to toggle the visibility of the content of each accordion panel tab by expanding the collapsing the trigger element based on multiple examples and styles.

The reactivity and state is handled by React and the components is built using the Tailwind CSS framework meaning that you can easily customize the styles and colors of the accordion.

To use the accordion component, you need to import the <Accordion> component from flowbite-react:

'use client';

import { Accordion } from 'flowbite-react';

Default accordion

Use this example of the <Accordion> component and the <Accordion.Panel> and <Accordion.Title> subcomponents to create an accordion with multiple panels.

Edit on GitHub

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.

  • React TypeScript
'use client';

import { Accordion } from 'flowbite-react';

export default function DefaultAccordion() {
  return (
    <Accordion>
      <Accordion.Panel>
        <Accordion.Title>
          What is Flowbite?
        </Accordion.Title>
        <Accordion.Content>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            <p>
              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons,
              dropdowns, modals, navbars, and more.
            </p>
          </p>
          <p className="text-gray-500 dark:text-gray-400">
            <p>
              Check out this guide to learn how to 
            </p>
            <a
              className="text-cyan-600 hover:underline dark:text-cyan-500"
              href="https://flowbite.com/docs/getting-started/introduction/"
            >
              <p>
                get started
              </p>
            </a>
            <p>
              and start developing websites even faster with components on top of Tailwind CSS.
            </p>
          </p>
        </Accordion.Content>
      </Accordion.Panel>
      <Accordion.Panel>
        <Accordion.Title>
          Is there a Figma file available?
        </Accordion.Title>
        <Accordion.Content>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            <p>
              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>
          <p className="text-gray-500 dark:text-gray-400">
            <p>
              Check out the
            </p>
            <a
              className="text-cyan-600 hover:underline dark:text-cyan-500"
              href="https://flowbite.com/figma/"
            >
              <p>
                Figma design system
              </p>
            </a>
            <p>
              based on the utility classes from Tailwind CSS and components from Flowbite.
            </p>
          </p>
        </Accordion.Content>
      </Accordion.Panel>
      <Accordion.Panel>
        <Accordion.Title>
          What are the differences between Flowbite and Tailwind UI?
        </Accordion.Title>
        <Accordion.Content>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            <p>
              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>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            <p>
              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>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            Learn more about these technologies:
          </p>
          <ul className="list-disc pl-5 text-gray-500 dark:text-gray-400">
            <li>
              <a
                className="text-cyan-600 hover:underline dark:text-cyan-500"
                href="https://flowbite.com/pro/"
              >
                <p>
                  Flowbite Pro
                </p>
              </a>
            </li>
            <li>
              <a
                className="text-cyan-600 hover:underline dark:text-cyan-500"
                href="https://tailwindui.com/"
                rel="nofollow"
              >
                <p>
                  Tailwind UI
                </p>
              </a>
            </li>
          </ul>
        </Accordion.Content>
      </Accordion.Panel>
    </Accordion>
  )
}

Collapse all

Use this example to automatically collapse all of the accordion panels by passing the collapseAll prop to the <Accordion> component.

Edit on GitHub
  • React TypeScript
'use client';

import { Accordion } from 'flowbite-react';

export default function CollapseAll() {
  return (
    <Accordion collapseAll>
      <Accordion.Panel>
        <Accordion.Title>
          What is Flowbite?
        </Accordion.Title>
        <Accordion.Content>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            <p>
              Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons,
              dropdowns, modals, navbars, and more.
            </p>
          </p>
          <p className="text-gray-500 dark:text-gray-400">
            <p>
              Check out this guide to learn how to 
            </p>
            <a
              className="text-cyan-600 hover:underline dark:text-cyan-500"
              href="https://flowbite.com/docs/getting-started/introduction/"
            >
              <p>
                get started
              </p>
            </a>
            <p>
              and start developing websites even faster with components on top of Tailwind CSS.
            </p>
          </p>
        </Accordion.Content>
      </Accordion.Panel>
      <Accordion.Panel>
        <Accordion.Title>
          Is there a Figma file available?
        </Accordion.Title>
        <Accordion.Content>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            <p>
              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>
          <p className="text-gray-500 dark:text-gray-400">
            <p>
              Check out the
            </p>
            <a
              className="text-cyan-600 hover:underline dark:text-cyan-500"
              href="https://flowbite.com/figma/"
            >
              <p>
                Figma design system
              </p>
            </a>
            <p>
              based on the utility classes from Tailwind CSS and components from Flowbite.
            </p>
          </p>
        </Accordion.Content>
      </Accordion.Panel>
      <Accordion.Panel>
        <Accordion.Title>
          What are the differences between Flowbite and Tailwind UI?
        </Accordion.Title>
        <Accordion.Content>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            <p>
              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>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            <p>
              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>
          <p className="mb-2 text-gray-500 dark:text-gray-400">
            Learn more about these technologies:
          </p>
          <ul className="list-disc pl-5 text-gray-500 dark:text-gray-400">
            <li>
              <a
                className="text-cyan-600 hover:underline dark:text-cyan-500"
                href="https://flowbite.com/pro/"
              >
                <p>
                  Flowbite Pro
                </p>
              </a>
            </li>
            <li>
              <a
                className="text-cyan-600 hover:underline dark:text-cyan-500"
                href="https://tailwindui.com/"
                rel="nofollow"
              >
                <p>
                  Tailwind UI
                </p>
              </a>
            </li>
          </ul>
        </Accordion.Content>
      </Accordion.Panel>
    </Accordion>
  )
}

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "divide-y divide-gray-200 border-gray-200 dark:divide-gray-700 dark:border-gray-700",
    "flush": {
      "off": "rounded-lg border",
      "on": "border-b"
    }
  },
  "content": {
    "base": "py-5 px-5 last:rounded-b-lg dark:bg-gray-900 first:rounded-t-lg"
  },
  "title": {
    "arrow": {
      "base": "h-6 w-6 shrink-0",
      "open": {
        "off": "",
        "on": "rotate-180"
      }
    },
    "base": "flex w-full items-center justify-between first:rounded-t-lg last:rounded-b-lg py-5 px-5 text-left font-medium text-gray-500 dark:text-gray-400",
    "flush": {
      "off": "hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-800 dark:focus:ring-gray-800",
      "on": "bg-transparent dark:bg-transparent"
    },
    "heading": "",
    "open": {
      "off": "",
      "on": "text-gray-900 bg-gray-100 dark:bg-gray-800 dark:text-white"
    }
  }
}

References