Tailwind CSS Drawer - Props

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

AttributeTypeDescriptionDefault
openbooleanSets the open and close state of drawerNo default value it's a required prop.
sizenumberSet's the width/height of the drawer depending on the drawer placement250
placementPlacementSets the drawer placementleft
overlaybooleanSets the overlay visibility for the drawertrue
overlayRefOverlay RefAdd reference for the drawer overlayundefined
overlayPropsOverlay PropsSets the rest props for the drawer overlayundefined
dismissdismissChange dismiss listeners for drawerundefined
onClosefunctionSets the callback function for closing the drawerundefined
transitionFramer MotionSets the transition for drawertransition: { type: "tween", duration: 0.5 }
classNamestringAdd custom className for drawer''
childrennodeAdd content for drawerNo default value it's a required prop.


For TypeScript Only

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

Types - Placement

export type placement = "top" | "right" | "bottom" | "left";

Types - Overlay Reference

export type overlayRef = React.Ref<HTMLDivElement>;

Types - Overlay Props

export type overlayProps = React.ComponentProps<"div">;

Types - Dismiss

type dismissType = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePress?: boolean;
  referencePressEvent?: "pointerdown" | "mousedown" | "click";
  outsidePress?: boolean | ((event: MouseEvent) => boolean);
  outsidePressEvent?: "pointerdown" | "mousedown" | "click";
  ancestorScroll?: boolean;
  bubbles?:
    | boolean
    | {
        escapeKey?: boolean;
        outsidePress?: boolean;
      };
};
Edit this page on Github