Tailwind CSS Collapse - React

Use our collapse component based on React and Tailwind CSS for your website. You can use it for accordion, collapsible items and much more.

See below our Collapse component examples that you can use in your Tailwind CSS and React project.

Collapse Demo

Here's how to implement a simple and responsive Collapse component. It can be used for accordion, mobile menu, file tree, and much more.

  • Components
"use client";

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

export function CollapseDemo() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <List>
      <List.Item onClick={() => setIsOpen((cur) => !cur)}>
        Components
        <List.ItemEnd>
          <NavArrowDown
            className={`h-5 w-5 stroke-[1.5] ${isOpen ? "rotate-180" : ""}`}
          />
        </List.ItemEnd>
      </List.Item>
      <Collapse open={isOpen}>
        <List>
          <List.Item>Avatar</List.Item>
          <List.Item>Button</List.Item>
          <List.Item>Input</List.Item>
          <List.Item>Checkbox</List.Item>
          <List.Item>Select</List.Item>
        </List>
      </Collapse>
    </List>
  );
}
"use client";

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

export function CollapseDemo() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <List>
      <List.Item onClick={() => setIsOpen((cur) => !cur)}>
        Components
        <List.ItemEnd>
          <NavArrowDown
            className={`h-5 w-5 stroke-[1.5] ${isOpen ? "rotate-180" : ""}`}
          />
        </List.ItemEnd>
      </List.Item>
      <Collapse open={isOpen}>
        <List>
          <List.Item>Avatar</List.Item>
          <List.Item>Button</List.Item>
          <List.Item>Input</List.Item>
          <List.Item>Checkbox</List.Item>
          <List.Item>Select</List.Item>
        </List>
      </Collapse>
    </List>
  );
}