collapse.mdx

title	description	navigation	github	prev	next
Tailwind CSS Collapse for React - Material Tailwind	Customise your web projects with our easy-to-use collapse component for Tailwind CSS and React using Material Design guidelines.	collapse collapse-props types-animate collapse-theme collapse-theme-object-type collapse-theme-customization	collapse	chip	carousel

# Tailwind CSS Collapse - React

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

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

<CodePreview component={<CollapseExamples.CollapseDefault />}>

import React from "react";
import {
  Collapse,
  Button,
  Card,
  Typography,
  CardBody,
} from "@material-tailwind/react";

export default function CollapseDefault() {
  const [open, setOpen] = React.useState(false);

  const toggleOpen = () => setOpen((cur) => !cur);

  return (
    <>
      <Button onClick={toggleOpen}>Open Collapse</Button>
      <Collapse open={open}>
        <Card className="my-4 mx-auto w-8/12">
          <CardBody>
            <Typography>
              Use our Tailwind CSS collapse for your website. You can use if for
              accordion, collapsible items and much more.
            </Typography>
          </CardBody>
        </Card>
      </Collapse>
    </>
  );
}

---

## Collapse Props

The following props are available for collapse component. These are the custom props that we've added for the collapse component and you can use all the other native props as well.

Attribute	Type	Description	Default
open	boolean	If true the collapse will expand	No default value it's a required prop.
animate	Animate	Change collapse animation	undefined
className	string	Add custom className for collapse	''
children	node	Add content for collapse	No default value it's a required prop.

For TypeScript Only

import type { CollapseProps } from "@material-tailwind/react";

---

## Types - Animate

type animate = {
  mount?: object;
  unmount?: object;
};

---

## Collapse Theme

Learn how to customize the theme and styles for collapse component, the theme object for collapse component has two main objects:

A. The defaultProps object for setting up the default value for props of collapse component.
B. The styles object for customizing the theme and styles of collapse component.

You can customize the theme and styles of collapse component by adding Tailwind CSS classes as key paired values for objects.

## Collapse Theme Object Type

interface CollapseStylesType {
  defaultProps: {
    animate: {
      mount: object;
      unmount: object;
    };
    className: string;
  };
  styles: {
    base: object;
  };
}

For TypeScript Only

import type { CollapseStylesType } from "@material-tailwind/react";

---

## Collapse Theme Customization

const theme = {
  collapse: {
    defaultProps: {
      animate: {
        unmount: {},
        mount: {},
      },
      className: "",
    },
    styles: {
      base: {
        display: "block",
        width: "w-full",
        basis: "basis-full",
        overflow: "overflow-hidden",
      },
    },
  },
};