Material Tailwind Documentation

You can customize the Drawer component using a theme object containing two main sections:

1. defaultProps: Sets the default values for Drawer props (e.g., size, placement, overlay).
2. styles: Customizes the visual appearance by mapping Tailwind CSS classes to specific internal elements like base.drawer and base.overlay.

For TypeScript users, import the DrawerStylesType to ensure type safety when defining your theme.

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

const theme: DrawerStylesType = {
  drawer: {
    defaultProps: {
      size: 300,
      overlay: true,
      placement: "left",
      overlayProps: undefined,
      className: "",
      dismiss: undefined,
      onClose: undefined,
      transition: {
        type: "tween",
        duration: 0.3,
      },
    },
    styles: {
      base: {
        drawer: {
          position: "fixed",
          zIndex: "z-[9999]",
          pointerEvents: "pointer-events-auto",
          backgroundColor: "bg-white",
          boxSizing: "box-border",
          width: "w-full",
          boxShadow: "shadow-2xl shadow-blue-gray-900/10",
        },
        overlay: {
          position: "absolute",
          inset: "inset-0",
          width: "w-full",
          height: "h-full",
          pointerEvents: "pointer-events-auto",
          zIndex: "z-[9995]",
          backgroundColor: "bg-black",
          backgroundOpacity: "bg-opacity-60",
          backdropBlur: "backdrop-blur-sm",
        },
      },
    },
  },
};

The Card component theme can be customized using a theme object containing three main sections:

1. defaultProps: Sets default values for Card props (e.g., variant, color, shadow, className).
2. valid: Defines the allowed values for props, such as variants and colors.
3. styles: Defines the actual Tailwind CSS classes for the component. This is subdivided into base (for initial and shadow states) and variants (for filled and gradient styles).

You can customize these by mapping Tailwind CSS classes to specific keys within the theme object.

const theme = {
  card: {
    defaultProps: {
      variant: "filled",
      color: "white",
      shadow: true,
      className: "",
    },
    valid: {
      variants: ["filled", "gradient"],
      colors: ["transparent", "white", "blue-gray", "gray", "brown", "deep-orange", "orange", "amber", "yellow", "lime", "light-green", "green", "teal", "cyan", "light-blue", "blue", "indigo", "deep-purple", "purple", "pink", "red"],
    },
    styles: {
      base: {
        initial: {
          position: "relative",
          display: "flex",
          flexDirection: "flex-col",
          backgroundClip: "bg-clip-border",
          borderRadius: "rounded-xl",
        },
        shadow: {
          boxShadow: "shadow-md",
        },
      },
      variants: {
        filled: {
          white: {
            backgroud: "bg-white",
            color: "text-gray-700",
          },
          // ... other colors
        },
        gradient: {
          blue: {
            backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400",
            color: "text-white",
            shadow: "shadow-blue-500/40",
          },
          // ... other colors
        },
      },
    },
  },
};

Use the collapse component to show or hide sections of content (like FAQs or menus) to save screen space. The component relies on matching data-collapse-target on a trigger element with data-collapse on the target content element.

To implement a default collapse, use a button as the trigger and a div as the collapsible container. Ensure the container has overflow-hidden and appropriate transition classes for smooth animation.

<button 
  data-collapse-target="collapse"
  class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  type="button"
>
  Open Collapse
</button>

<div
  data-collapse="collapse"
  class="block h-0 w-full basis-full overflow-hidden transition-all duration-300 ease-in-out"
>
  <div class="relative mx-auto flex w-8/12 flex-col rounded-lg bg-white border border-slate-200 shadow-sm mt-4">
    <div class="p-4">
      <p class="text-slate-600 font-light">
        Use our Tailwind CSS collapse for your website.
      </p>
    </div>
  </div>
</div>