Use our Tailwind CSS Dialog component to inform users about a task or important information that require decisions, or involves multiple tasks.
A Dialog is a type of modal window with critical information which disable all app functionality when they appear and remains on screen until confirmed/dismissed.
See below our Dialog example that you can use for your Tailwind CSS and React project.
import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
} from "@material-tailwind/react";
export function DialogDefault() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(!open);
return (
<>
<Button onClick={handleOpen} variant="gradient">
Open Dialog
</Button>
<Dialog open={open} handler={handleOpen}>
<DialogHeader>Its a simple dialog.</DialogHeader>
<DialogBody>
The key to more success is to have a lot of pillows. Put it this way,
it took me twenty five years to get these plants, twenty five years of
blood sweat and tears, and I'm never giving up, I'm just
getting started. I'm up to something. Fan luv.
</DialogBody>
<DialogFooter>
<Button
variant="text"
color="red"
onClick={handleOpen}
className="mr-1"
>
<span>Cancel</span>
</Button>
<Button variant="gradient" color="green" onClick={handleOpen}>
<span>Confirm</span>
</Button>
</DialogFooter>
</Dialog>
</>
);
}The Dialog component comes with 6 different sizes that you can change it using the size prop.
import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
} from "@material-tailwind/react";
export function DialogSizes() {
const [size, setSize] = React.useState(null);
const handleOpen = (value) => setSize(value);
return (
<>
<div className="mb-3 flex gap-3">
<Button onClick={() => handleOpen("xs")} variant="gradient">
Open Dialog XS
</Button>
<Button onClick={() => handleOpen("sm")} variant="gradient">
Open Dialog SM
</Button>
<Button onClick={() => handleOpen("md")} variant="gradient">
Open Dialog MD
</Button>
</div>
<div className="flex gap-3">
<Button onClick={() => handleOpen("lg")} variant="gradient">
Open Dialog LG
</Button>
<Button onClick={() => handleOpen("xl")} variant="gradient">
Open Dialog XL
</Button>
<Button onClick={() => handleOpen("xxl")} variant="gradient">
Open Dialog XXL
</Button>
</div>
<Dialog
open={
size === "xs" ||
size === "sm" ||
size === "md" ||
size === "lg" ||
size === "xl" ||
size === "xxl"
}
size={size || "md"}
handler={handleOpen}
>
<DialogHeader>Its a simple dialog.</DialogHeader>
<DialogBody>
The key to more success is to have a lot of pillows. Put it this way,
it took me twenty five years to get these plants, twenty five years of
blood sweat and tears, and I'm never giving up, I'm just
getting started. I'm up to something. Fan luv.
</DialogBody>
<DialogFooter>
<Button
variant="text"
color="red"
onClick={() => handleOpen(null)}
className="mr-1"
>
<span>Cancel</span>
</Button>
<Button
variant="gradient"
color="green"
onClick={() => handleOpen(null)}
>
<span>Confirm</span>
</Button>
</DialogFooter>
</Dialog>
</>
);
}You can modify the open/close state animation for Dialog component using the animate prop.
import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
} from "@material-tailwind/react";
export function DialogCustomAnimation() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(!open);
return (
<>
<Button onClick={handleOpen} variant="gradient">
Open Dialog
</Button>
<Dialog
open={open}
handler={handleOpen}
animate={{
mount: { scale: 1, y: 0 },
unmount: { scale: 0.9, y: -100 },
}}
>
<DialogHeader>Its a simple dialog.</DialogHeader>
<DialogBody>
The key to more success is to have a lot of pillows. Put it this way,
it took me twenty five years to get these plants, twenty five years of
blood sweat and tears, and I'm never giving up, I'm just
getting started. I'm up to something. Fan luv.
</DialogBody>
<DialogFooter>
<Button
variant="text"
color="red"
onClick={handleOpen}
className="mr-1"
>
<span>Cancel</span>
</Button>
<Button variant="gradient" color="green" onClick={handleOpen}>
<span>Confirm</span>
</Button>
</DialogFooter>
</Dialog>
</>
);
}Use the example below to create a dialog with a sign in form.
import React from "react";
import {
Button,
Dialog,
Card,
CardHeader,
CardBody,
CardFooter,
Typography,
Input,
Checkbox,
} from "@material-tailwind/react";
export function DialogWithForm() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen((cur) => !cur);
return (
<>
<Button onClick={handleOpen}>Sign In</Button>
<Dialog
size="xs"
open={open}
handler={handleOpen}
className="bg-transparent shadow-none"
>
<Card className="mx-auto w-full max-w-[24rem]">
<CardBody className="flex flex-col gap-4">
<Typography variant="h4" color="blue-gray">
Sign In
</Typography>
<Typography
className="mb-3 font-normal"
variant="paragraph"
color="gray"
>
Enter your email and password to Sign In.
</Typography>
<Typography className="-mb-2" variant="h6">
Your Email
</Typography>
<Input label="Email" size="lg" />
<Typography className="-mb-2" variant="h6">
Your Password
</Typography>
<Input label="Password" size="lg" />
<div className="-ml-2.5 -mt-3">
<Checkbox label="Remember Me" />
</div>
</CardBody>
<CardFooter className="pt-0">
<Button variant="gradient" onClick={handleOpen} fullWidth>
Sign In
</Button>
<Typography variant="small" className="mt-4 flex justify-center">
Don't have an account?
<Typography
as="a"
href="#signup"
variant="small"
color="blue-gray"
className="ml-1 font-bold"
onClick={handleOpen}
>
Sign up
</Typography>
</Typography>
</CardFooter>
</Card>
</Dialog>
</>
);
}Use the example below to create a dialog with an image inside, similar to unsplash.
import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Avatar,
IconButton,
Typography,
Card,
} from "@material-tailwind/react";
export function DialogWithImage() {
const [open, setOpen] = React.useState(false);
const [isFavorite, setIsFavorite] = React.useState(false);
const handleOpen = () => setOpen((cur) => !cur);
const handleIsFavorite = () => setIsFavorite((cur) => !cur);
return (
<>
<Card
className="h-64 w-96 cursor-pointer overflow-hidden transition-opacity hover:opacity-90"
onClick={handleOpen}
>
<img
alt="nature"
className="h-full w-full object-cover object-center"
src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80"
/>
</Card>
<Dialog size="xl" open={open} handler={handleOpen}>
<DialogHeader className="justify-between">
<div className="flex items-center gap-3">
<Avatar
size="sm"
variant="circular"
alt="tania andrew"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
/>
<div className="-mt-px flex flex-col">
<Typography
variant="small"
color="blue-gray"
className="font-medium"
>
Tania Andrew
</Typography>
<Typography
variant="small"
color="gray"
className="text-xs font-normal"
>
@emmaroberts
</Typography>
</div>
</div>
<div className="flex items-center gap-2">
<IconButton
variant="text"
size="sm"
color={isFavorite ? "red" : "blue-gray"}
onClick={handleIsFavorite}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
</IconButton>
<Button color="gray" size="sm">
Free Download
</Button>
</div>
</DialogHeader>
<DialogBody>
<img
alt="nature"
className="h-[48rem] w-full rounded-lg object-cover object-center"
src="https://images.unsplash.com/photo-1485470733090-0aae1788d5af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2717&q=80"
/>
</DialogBody>
<DialogFooter className="justify-between">
<div className="flex items-center gap-16">
<div>
<Typography variant="small" color="gray" className="font-normal">
Views
</Typography>
<Typography color="blue-gray" className="font-medium">
44,082,044
</Typography>
</div>
<div>
<Typography variant="small" color="gray" className="font-normal">
Downloads
</Typography>
<Typography color="blue-gray" className="font-medium">
553,031
</Typography>
</div>
</div>
<Button
size="sm"
variant="outlined"
color="blue-gray"
className="mr-5 flex items-center"
>
Share
</Button>
</DialogFooter>
</Dialog>
</>
);
}Use the example below to create a Web 3.0 wallet connect dialog.
import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
IconButton,
Typography,
MenuItem,
} from "@material-tailwind/react";
export function Web3Dialog() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen((cur) => !cur);
return (
<>
<Button onClick={handleOpen}>Connect Wallet</Button>
<Dialog size="xs" open={open} handler={handleOpen}>
<DialogHeader className="justify-between">
<div>
<Typography variant="h5" color="blue-gray">
Connect a Wallet
</Typography>
<Typography color="gray" variant="paragraph">
Choose which card you want to connect
</Typography>
</div>
<IconButton
color="blue-gray"
size="sm"
variant="text"
onClick={handleOpen}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</IconButton>
</DialogHeader>
<DialogBody className="overflow-y-scroll !px-5">
<div className="mb-6">
<Typography
variant="paragraph"
color="blue-gray"
className="py-3 font-semibold uppercase opacity-70"
>
Popular
</Typography>
<ul className="mt-3 -ml-2 flex flex-col gap-1">
<MenuItem className="mb-4 flex items-center justify-center gap-3 !py-4 shadow-md">
<img
src="https://docs.material-tailwind.com/icons/metamask.svg"
alt="metamast"
className="h-6 w-6"
/>
<Typography
className="uppercase"
color="blue-gray"
variant="h6"
>
Connect with MetaMask
</Typography>
</MenuItem>
<MenuItem className="mb-1 flex items-center justify-center gap-3 !py-4 shadow-md">
<img
src="https://docs.material-tailwind.com/icons/coinbase.svg"
alt="metamast"
className="h-6 w-6 rounded-md"
/>
<Typography
className="uppercase"
color="blue-gray"
variant="h6"
>
Connect with Coinbase
</Typography>
</MenuItem>
</ul>
</div>
<div>
<Typography
variant="paragraph"
color="blue-gray"
className="py-4 font-semibold uppercase opacity-70"
>
Other
</Typography>
<ul className="mt-4 -ml-2.5 flex flex-col gap-1">
<MenuItem className="mb-4 flex items-center justify-center gap-3 !py-4 shadow-md">
<img
src="https://docs.material-tailwind.com/icons/trust-wallet.svg"
alt="metamast"
className="h-7 w-7 rounded-md border border-blue-gray-50"
/>
<Typography
className="uppsecase"
color="blue-gray"
variant="h6"
>
Connect with Trust Wallet
</Typography>
</MenuItem>
</ul>
</div>
</DialogBody>
<DialogFooter className="justify-between gap-2">
<Typography variant="small" color="gray" className="font-normal">
New to Ethereum wallets?
</Typography>
<Button variant="outlined" size="sm">
Learn More
</Button>
</DialogFooter>
</Dialog>
</>
);
}import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Typography,
} from "@material-tailwind/react";
export function LongDialog() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(!open);
return (
<>
<Button onClick={handleOpen}>Long Dialog</Button>
<Dialog open={open} handler={handleOpen}>
<DialogHeader>Long Dialog</DialogHeader>
<DialogBody className="h-[42rem] overflow-scroll">
<Typography className="font-normal">
I've always had unwavering confidence in my abilities, and I
believe our thoughts and self-perception are the primary forces that
shape us. Many people limit themselves by their own self-doubt,
slowing their progress. Fortunately, I was raised with the belief
that I could achieve anything.
<br />
<br />
As we journey through life, we often encounter challenges that
harden our hearts. Pain, insults, broken trust, and betrayal can
make us hesitant to help others. Love can lead to heartbreak, and
time can distance us from family. These experiences can gradually
erode our optimism.
<br /> <br />
Life doesn't always place us where we want to be. We grow, make
mistakes, and strive to express ourselves and fulfill our dreams. If
we're fortunate enough to participate in life's journey,
we should cherish every moment. Regrettably, some only recognize the
value of a moment after it's passed.
<br /> <br />
One thing I've learned is that I can excel at anything I set my
mind to. My skill is my ability to learn. I'm here to learn, to
grow, and to inspire others to do the same. Don't fear making
mistakes; they teach us far more than compliments ever will.
Ultimately, what truly matters is how our actions inspire and
motivate others. Some will be ignited by our endeavors, while others
may be offended—it's all part of the process. I'm here to
pursue my dreams and encourage others to do the same.
<br /> <br />
Now is the time to embrace greatness without fear of judgment. Some
may resent those who shine brightly or stand out, but it's time
to be the best version of ourselves. Do you have faith in your
beliefs, even if you're the only one who does?
</Typography>
</DialogBody>
<DialogFooter className="space-x-2">
<Button variant="text" color="blue-gray" onClick={handleOpen}>
cancel
</Button>
<Button variant="gradient" color="green" onClick={handleOpen}>
confirm
</Button>
</DialogFooter>
</Dialog>
</>
);
}import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Input,
Textarea,
} from "@material-tailwind/react";
export function MessageDialog() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(!open);
return (
<>
<Button onClick={handleOpen}>Message Dialog</Button>
<Dialog open={open} size="xs" handler={handleOpen}>
<div className="flex items-center justify-between">
<DialogHeader className="flex flex-col items-start">
{" "}
<Typography className="mb-1" variant="h4">
New message to @{" "}
</Typography>
</DialogHeader>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="mr-3 h-5 w-5"
onClick={handleOpen}
>
<path
fillRule="evenodd"
d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
clipRule="evenodd"
/>
</svg>
</div>
<DialogBody>
<Typography className="mb-10 -mt-7 " color="gray" variant="lead">
Write the message and then click button.
</Typography>
<div className="grid gap-6">
<Typography className="-mb-1" color="blue-gray" variant="h6">
Username
</Typography>
<Input label="Username" />
<Textarea label="Message" />
</div>
</DialogBody>
<DialogFooter className="space-x-2">
<Button variant="text" color="gray" onClick={handleOpen}>
cancel
</Button>
<Button variant="gradient" color="gray" onClick={handleOpen}>
send message
</Button>
</DialogFooter>
</Dialog>
</>
);
}import React from "react";
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Typography,
} from "@material-tailwind/react";
export function NotificationDialog() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(!open);
return (
<>
<Button onClick={handleOpen}>Notification</Button>
<Dialog open={open} handler={handleOpen}>
<DialogHeader>
<Typography variant="h5" color="blue-gray">
Your Attention is Required!
</Typography>
</DialogHeader>
<DialogBody divider className="grid place-items-center gap-4">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-16 w-16 text-red-500"
>
<path
fillRule="evenodd"
d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
clipRule="evenodd"
/>
</svg>
<Typography color="red" variant="h4">
You should read this!
</Typography>
<Typography className="text-center font-normal">
A small river named Duden flows by their place and supplies it with
the necessary regelialia.
</Typography>
</DialogBody>
<DialogFooter className="space-x-2">
<Button variant="text" color="blue-gray" onClick={handleOpen}>
close
</Button>
<Button variant="gradient" onClick={handleOpen}>
Ok, Got it
</Button>
</DialogFooter>
</Dialog>
</>
);
}The following props are available for dialog component. These are the custom props that we've added for the dialog component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
open | boolean | Open the dialog | No default value it's a required prop. |
handler | function | Controls open and close states for dialog | No default value it's a required prop. |
size | Size | Change dialog size | md |
dismiss | Dismiss | Change backdrop dismiss listeners | undefined |
animate | Animate | Change dialog animation | undefined |
className | string | Add custom className for dialog | '' |
children | node | Add content for dialog | No default value it's a required prop. |
For TypeScript Only
import type { DialogProps } from "@material-tailwind/react";The following props are available for dialog header component. These are the custom props that we've added for the dialog header component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
className | string | Add custom className for dialog header | '' |
children | node | Add content for dialog header | No default value it's a required prop. |
For TypeScript Only
import type { DialogHeaderProps } from "@material-tailwind/react";The following props are available for dialog body component. These are the custom props that we've added for the dialog body component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
divider | boolean | Add border top & bottom for dialog body | false |
className | string | Add custom className for dialog body | '' |
children | node | Add content for dialog body | No default value it's a required prop. |
For TypeScript Only
import type { DialogBodyProps } from "@material-tailwind/react";The following props are available for dialog footer component. These are the custom props that we've added for the dialog footer component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
className | string | Add custom className for dialog footer | '' |
children | node | Add content for dialog footer | No default value it's a required prop. |
For TypeScript Only
import type { DialogFooterProps } from "@material-tailwind/react";type size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";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;
};
};type animate = {
mount?: object;
unmount?: object;
};Learn how to customize the theme and styles for dialog components, the theme object for dialog components has three main objects:
A. The defaultProps object for setting up the default value for props of dialog component.
B. The valid object for customizing the valid values for dialog component props.
C. The styles object for customizing the theme and styles of dialog component.
You can customize the theme and styles of dialog components by adding Tailwind CSS classes as key paired values for objects.
interface DialogStylesType {
defaultProps: {
size: string;
dismiss: {
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;
};
};
animate: {
mount: object;
unmount: object;
};
className: string;
};
valid: {
sizes: string[];
};
styles: {
base: {
backdrop: object;
container: object;
};
sizes: {
xs: object;
sm: object;
md: object;
lg: object;
xl: object;
xxl: object;
};
};
}For TypeScript Only
import type { DialogStylesType } from "@material-tailwind/react";const theme = {
dialog: {
defaultProps: {
size: "md",
dismiss: {},
animate: {
unmount: {},
mount: {},
},
className: "",
},
valid: {
sizes: ["xs", "sm", "md", "lg", "xl", "xxl"],
},
styles: {
base: {
backdrop: {
display: "grid",
placeItems: "place-items-center",
position: "fixed",
top: 0,
left: 0,
width: "w-screen",
height: "h-screen",
backgroundColor: "bg-black",
backgroundOpacity: "bg-opacity-60",
backdropFilter: "backdrop-blur-sm",
},
container: {
position: "relative",
bg: "bg-white",
m: "m-4",
borderRadius: "rounded-lg",
boxShadow: "shadow-2xl",
color: "text-blue-gray-500",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-base",
fontWeight: "font-light",
lineHeight: "leading-relaxed",
},
},
sizes: {
xs: {
width: "w-full md:w-3/5 lg:w-2/5 2xl:w-1/4",
minWidth: "min-w-[80%] md:min-w-[60%] lg:min-w-[40%] 2xl:min-w-[25%]",
maxWidth: "max-w-[80%] md:max-w-[60%] lg:max-w-[40%] 2xl:max-w-[25%]",
},
sm: {
width: "w-full md:w-2/3 lg:w-2/4 2xl:w-1/3",
minWidth: "min-w-[80%] md:min-w-[66.666667%] lg:min-w-[50%] 2xl:min-w-[33.333333%]",
maxWidth: "max-w-[80%] md:max-w-[66.666667%] lg:max-w-[50%] 2xl:max-w-[33.333333%]",
},
md: {
width: "w-full md:w-3/4 lg:w-3/5 2xl:w-2/5",
minWidth: "min-w-[90%] md:min-w-[75%] lg:min-w-[60%] 2xl:min-w-[40%]",
maxWidth: "max-w-[90%] md:max-w-[75%] lg:max-w-[60%] 2xl:max-w-[40%]",
},
lg: {
width: "w-full md:w-5/6 lg:w-3/4 2xl:w-3/5",
minWidth: "min-w-[90%] md:min-w-[83.333333%] lg:min-w-[75%] 2xl:min-w-[60%]",
maxWidth: "max-w-[90%] md:max-w-[83.333333%] lg:max-w-[75%] 2xl:max-w-[60%]",
},
xl: {
width: "w-full md:w-5/6 2xl:w-3/4",
minWidth: "min-w-[95%] md:min-w-[83.333333%] 2xl:min-w-[75%]",
maxWidth: "max-w-[95%] md:max-w-[83.333333%] 2xl:max-w-[75%]",
},
xxl: {
display: "flex",
flexDirection: "flex-col",
width: "w-screen",
minWidth: "min-w-[100vw]",
maxWidth: "max-w-[100vw]",
height: "h-screen",
minHeight: "min-h-[100vh]",
maxHeight: "max-h-[100vh]",
m: "m-0",
borderRadius: "rounded-none",
},
},
},
},
};interface DialogHeaderStylesType {
defaultProps: {
className: string;
};
styles: {
base: object;
};
}For TypeScript Only
import type { DialogHeaderStylesType } from "@material-tailwind/react";const theme = {
dialogHeader: {
defaultProps: {
className: "",
},
styles: {
base: {
display: "flex",
alignItems: "items-center",
flexShrink: "shrink-0",
p: "p-4",
color: "text-blue-gray-900",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-2xl",
fontWeight: "font-semibold",
lineHeight: "leading-snug",
},
},
},
};interface DialogBodyStylesType {
defaultProps: {
className: string;
divider: boolean;
};
styles: {
base: {
initial: object;
divider: object;
};
};
}For TypeScript Only
import type { DialogBodyStylesType } from "@material-tailwind/react";const theme = {
dialogBody: {
defaultProps: {
className: "",
divider: false,
},
styles: {
base: {
initial: {
position: "relative",
p: "p-4",
color: "text-blue-gray-500",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-base",
fontWeight: "font-light",
lineHeight: "leading-relaxed",
},
divider: {
borderTop: "border-t",
borderTopColor: "border-t-blue-gray-100",
borderBottom: "border-b",
borderBottomColor: "border-b-blue-gray-100",
},
},
},
},
};interface DialogFooterStylesType {
defaultProps: {
className: string;
};
styles: {
base: object;
};
}For TypeScript Only
import type { DialogFooterStylesType } from "@material-tailwind/react";const theme = {
dialogFooter: {
defaultProps: {
className: "",
},
styles: {
base: {
display: "flex",
alignItems: "items-center",
justifyContent: "justify-end",
flexShrink: "shrink-0",
flexWrap: "flex-wrap",
p: "p-4",
color: "text-blue-gray-500",
},
},
},
};