Tailwind CSS Accordion - React

Use our React Accordion component to allow the user to show and hide sections of related content on a page. There are many ways to use this component, like displaying a list of FAQs, showing various menus and submenus, displaying the locations of a particular company, and so on.

See below our Accordion component examples that you can use in your Tailwind CSS and React project. The examples comes in different styles and colors, so you can adapt it easily to your needs.

Accordion Demo

Here's how to implement a simple and responsive Accordion component. It can be used for FAQs in your website.

import { Accordion } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function AccordionDemo() {
  return (
    <Accordion defaultValue="react">
      <Accordion.Item value="react">
        <Accordion.Trigger>
          Material Tailwind React
          <NavArrowDown className="h-4 w-4 data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="html">
        <Accordion.Trigger>
          Material Tailwind HTML
          <NavArrowDown className="h-4 w-4 data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="vue">
        <Accordion.Trigger>
          Material Tailwind Vue
          <NavArrowDown className="h-4 w-4 data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}
import { Accordion } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function AccordionDemo() {
  return (
    <Accordion defaultValue="react">
      <Accordion.Item value="react">
        <Accordion.Trigger>
          Material Tailwind React
          <NavArrowDown className="h-4 w-4 data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="html">
        <Accordion.Trigger>
          Material Tailwind HTML
          <NavArrowDown className="h-4 w-4 data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="vue">
        <Accordion.Trigger>
          Material Tailwind Vue
          <NavArrowDown className="h-4 w-4 data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Accordion All Open

You can set all the Accordion items to be open by default by passing an array of values to the defaultValue prop.

import { Accordion } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function AccordionAllOpen() {
  return (
    <Accordion defaultValue={["react", "html", "vue"]}>
      <Accordion.Item value="react">
        <Accordion.Trigger>
          Material Tailwind React
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="html">
        <Accordion.Trigger>
          Material Tailwind HTML
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="vue">
        <Accordion.Trigger>
          Material Tailwind Vue
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}
import { Accordion } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function AccordionAllOpen() {
  return (
    <Accordion defaultValue={["react", "html", "vue"]}>
      <Accordion.Item value="react">
        <Accordion.Trigger>
          Material Tailwind React
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="html">
        <Accordion.Trigger>
          Material Tailwind HTML
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="vue">
        <Accordion.Trigger>
          Material Tailwind Vue
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Controlled Accordion

The Accordion component could be either controlled or uncontrolled. In the controlled mode, you can manage the state of the Accordion component by yourself. You can use the value and onValueChange props to control the state of the Accordion component.

import * as React from "react";
import { Accordion, Button } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function ControlledAccordion() {
  const [open, setOpen] = React.useState("html");

  return (
    <div>
      <div className="mb-4 flex gap-2">
        <Button
          isFullWidth
          variant={open === "react" ? "solid" : "outline"}
          onClick={() => setOpen("react")}
        >
          React Version
        </Button>
        <Button
          isFullWidth
          variant={open === "html" ? "solid" : "outline"}
          onClick={() => setOpen("html")}
        >
          HTML Version
        </Button>
        <Button
          isFullWidth
          variant={open === "vue" ? "solid" : "outline"}
          onClick={() => setOpen("vue")}
        >
          Vue Version
        </Button>
      </div>
      <Accordion value={open} onValueChange={setOpen}>
        <Accordion.Item value="react">
          <Accordion.Trigger>
            Material Tailwind React
            <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
          </Accordion.Trigger>
          <Accordion.Content>
            Material Tailwind is an open-source crafted in Tailwind CSS. Get
            Material Tailwind and take advantage of its free components and
            features that will help you set up your web project quickly.
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="html">
          <Accordion.Trigger>
            Material Tailwind HTML
            <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
          </Accordion.Trigger>
          <Accordion.Content>
            Material Tailwind is an open-source crafted in Tailwind CSS. Get
            Material Tailwind and take advantage of its free components and
            features that will help you set up your web project quickly.
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="vue">
          <Accordion.Trigger>
            Material Tailwind Vue
            <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
          </Accordion.Trigger>
          <Accordion.Content>
            Material Tailwind is an open-source crafted in Tailwind CSS. Get
            Material Tailwind and take advantage of its free components and
            features that will help you set up your web project quickly.
          </Accordion.Content>
        </Accordion.Item>
      </Accordion>
    </div>
  );
}
import * as React from "react";
import { Accordion, Button } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function ControlledAccordion() {
  const [open, setOpen] = React.useState("html");

  return (
    <div>
      <div className="mb-4 flex gap-2">
        <Button
          isFullWidth
          variant={open === "react" ? "solid" : "outline"}
          onClick={() => setOpen("react")}
        >
          React Version
        </Button>
        <Button
          isFullWidth
          variant={open === "html" ? "solid" : "outline"}
          onClick={() => setOpen("html")}
        >
          HTML Version
        </Button>
        <Button
          isFullWidth
          variant={open === "vue" ? "solid" : "outline"}
          onClick={() => setOpen("vue")}
        >
          Vue Version
        </Button>
      </div>
      <Accordion value={open} onValueChange={setOpen}>
        <Accordion.Item value="react">
          <Accordion.Trigger>
            Material Tailwind React
            <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
          </Accordion.Trigger>
          <Accordion.Content>
            Material Tailwind is an open-source crafted in Tailwind CSS. Get
            Material Tailwind and take advantage of its free components and
            features that will help you set up your web project quickly.
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="html">
          <Accordion.Trigger>
            Material Tailwind HTML
            <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
          </Accordion.Trigger>
          <Accordion.Content>
            Material Tailwind is an open-source crafted in Tailwind CSS. Get
            Material Tailwind and take advantage of its free components and
            features that will help you set up your web project quickly.
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="vue">
          <Accordion.Trigger>
            Material Tailwind Vue
            <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
          </Accordion.Trigger>
          <Accordion.Content>
            Material Tailwind is an open-source crafted in Tailwind CSS. Get
            Material Tailwind and take advantage of its free components and
            features that will help you set up your web project quickly.
          </Accordion.Content>
        </Accordion.Item>
      </Accordion>
    </div>
  );
}

Accordion Custom Icon

You can customize the Accordion trigger icon by using the Accordion.Trigger component. To make it work, you need to use group-data-[open=true] for the icons to show/hide based on the Accordion state.

import { Accordion } from "@material-tailwind/react";
import { Minus, Plus } from "iconoir-react";

export function AccordionCustomIcon() {
  return (
    <Accordion defaultValue="react">
      <Accordion.Item value="react">
        <Accordion.Trigger>
          Material Tailwind React
          <Plus className="block h-4 w-4 group-data-[open=true]:hidden" />
          <Minus className="hidden h-4 w-4 group-data-[open=true]:block" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="html">
        <Accordion.Trigger>
          Material Tailwind HTML
          <Plus className="block h-4 w-4 group-data-[open=true]:hidden" />
          <Minus className="hidden h-4 w-4 group-data-[open=true]:block" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="vue">
        <Accordion.Trigger>
          Material Tailwind Vue
          <Plus className="block h-4 w-4 group-data-[open=true]:hidden" />
          <Minus className="hidden h-4 w-4 group-data-[open=true]:block" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}
import { Accordion } from "@material-tailwind/react";
import { Minus, Plus } from "iconoir-react";

export function AccordionCustomIcon() {
  return (
    <Accordion defaultValue="react">
      <Accordion.Item value="react">
        <Accordion.Trigger>
          Material Tailwind React
          <Plus className="block h-4 w-4 group-data-[open=true]:hidden" />
          <Minus className="hidden h-4 w-4 group-data-[open=true]:block" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="html">
        <Accordion.Trigger>
          Material Tailwind HTML
          <Plus className="block h-4 w-4 group-data-[open=true]:hidden" />
          <Minus className="hidden h-4 w-4 group-data-[open=true]:block" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="vue">
        <Accordion.Trigger>
          Material Tailwind Vue
          <Plus className="block h-4 w-4 group-data-[open=true]:hidden" />
          <Minus className="hidden h-4 w-4 group-data-[open=true]:block" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Accordion Custom Styles

You can customize the Accordion component by using the className prop. In the example below, we've showcased how to create a custom style for the Accordion component.

import { Accordion } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function AccordionCustomStyles() {
  return (
    <Accordion defaultValue="react">
      <Accordion.Item
        value="react"
        className="mb-2 rounded-lg border border-surface p-2"
      >
        <Accordion.Trigger>
          Material Tailwind React
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item
        value="html"
        className="mb-2 rounded-lg border border-surface p-2"
      >
        <Accordion.Trigger>
          Material Tailwind HTML
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item
        value="vue"
        className="rounded-lg border border-surface p-2"
      >
        <Accordion.Trigger>
          Material Tailwind Vue
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}
import { Accordion } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function AccordionCustomStyles() {
  return (
    <Accordion defaultValue="react">
      <Accordion.Item
        value="react"
        className="mb-2 rounded-lg border border-surface p-2"
      >
        <Accordion.Trigger>
          Material Tailwind React
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item
        value="html"
        className="mb-2 rounded-lg border border-surface p-2"
      >
        <Accordion.Trigger>
          Material Tailwind HTML
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item
        value="vue"
        className="rounded-lg border border-surface p-2"
      >
        <Accordion.Trigger>
          Material Tailwind Vue
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Accordion Disabled

You can disable the Accordion item by adding the disabled prop. This will prevent the user from interacting with the Accordion item.

import { Accordion } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function AccordionDisabled() {
  return (
    <Accordion defaultValue="html">
      <Accordion.Item disabled value="react">
        <Accordion.Trigger>
          Material Tailwind React
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="html">
        <Accordion.Trigger>
          Material Tailwind HTML
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="vue">
        <Accordion.Trigger>
          Material Tailwind Vue
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}
import { Accordion } from "@material-tailwind/react";
import { NavArrowDown } from "iconoir-react";

export function AccordionDisabled() {
  return (
    <Accordion defaultValue="html">
      <Accordion.Item disabled value="react">
        <Accordion.Trigger>
          Material Tailwind React
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="html">
        <Accordion.Trigger>
          Material Tailwind HTML
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="vue">
        <Accordion.Trigger>
          Material Tailwind Vue
          <NavArrowDown className="h-4 w-4 group-data-[open=true]:rotate-180" />
        </Accordion.Trigger>
        <Accordion.Content>
          Material Tailwind is an open-source crafted in Tailwind CSS. Get
          Material Tailwind and take advantage of its free components and
          features that will help you set up your web project quickly.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}