- Getting Started
- Upgrade Guide
- Integration Guide
- Customization
- Components
- Feedback
- Third-Party Plugins
Tailwind CSS Dialog - React
Use our React and 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 component examples that you can use for your Tailwind CSS and React project.
#Dialog Demo
Here's how to implement a simple and responsive Dialog component. It can be used to inform users about a task or important information that require decisions, or involves multiple tasks in your website.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import {
Dialog,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogDemo() {
return (
<Dialog>
<Dialog.Trigger as={Button}>Open Dialog</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power of
Tailwind CSS and React to help you build unique web projects faster
and easier. The stunning design inspired by Material Design is a
bonus! Get Material Tailwind and take advantage of its free
components and features that will help you set up your web project
quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger as={Button} variant="ghost" color="error">
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
import {
Dialog,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogDemo() {
return (
<Dialog>
<Dialog.Trigger as={Button}>Open Dialog</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power of
Tailwind CSS and React to help you build unique web projects faster
and easier. The stunning design inspired by Material Design is a
bonus! Get Material Tailwind and take advantage of its free
components and features that will help you set up your web project
quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger as={Button} variant="ghost" color="error">
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
#Dialog Sizes
We provide different dialog sizes like xs, sm, md, lg, xl and screen so you can adapt it easily to your needs. You can simply use the size prop to change the dialog size.
In the example below, we've showcased the different dialog sizes that you can use in your project. In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import {
Dialog,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogSizes() {
return (
<>
<div className="flex items-center justify-center gap-2">
<Dialog size="xs">
<Dialog.Trigger as={Button}>Open Dialog XS</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
<Typography type="h6">
Material Tailwind
</Typography>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
<Dialog size="sm">
<Dialog.Trigger as={Button}>Open Dialog SM</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
<Dialog size="md">
<Dialog.Trigger as={Button}>Open Dialog MD</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
</div>
<div className="flex items-center justify-center gap-2">
<Dialog size="lg">
<Dialog.Trigger as={Button}>Open Dialog LG</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
<Dialog size="xl">
<Dialog.Trigger as={Button}>Open Dialog XL</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
<Dialog size="screen">
<Dialog.Trigger as={Button}>Open Dialog Screen</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
</div>
</>
);
}
import {
Dialog,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogSizes() {
return (
<>
<div className="flex items-center justify-center gap-2">
<Dialog size="xs">
<Dialog.Trigger as={Button}>Open Dialog XS</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
<Typography type="h6">
Material Tailwind
</Typography>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
<Dialog size="sm">
<Dialog.Trigger as={Button}>Open Dialog SM</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
<Dialog size="md">
<Dialog.Trigger as={Button}>Open Dialog MD</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
</div>
<div className="flex items-center justify-center gap-2">
<Dialog size="lg">
<Dialog.Trigger as={Button}>Open Dialog LG</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
<Dialog size="xl">
<Dialog.Trigger as={Button}>Open Dialog XL</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
<Dialog size="screen">
<Dialog.Trigger as={Button}>Open Dialog Screen</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">
Material Tailwind
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind is an open-source library that uses the power
of Tailwind CSS and React to help you build unique web projects
faster and easier. The stunning design inspired by Material
Design is a bonus! Get Material Tailwind and take advantage of
its free components and features that will help you set up your
web project quickly.
</Typography>
<div className="mb-1 flex items-center justify-end gap-2">
<Dialog.DismissTrigger
as={Button}
variant="ghost"
color="error"
>
Cancel
</Dialog.DismissTrigger>
<Button>Get Started</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
</div>
</>
);
}
#Dialog with Form
Use this example to create a dialog with a authentication form. You can use this dialog to create a login or sign up form in your website.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import {
Dialog,
Button,
Input,
Checkbox,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogWithForm() {
return (
<Dialog size="sm">
<Dialog.Trigger as={Button}>Sign In</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
<Typography type="h6" className="mb-1">
Sign In
</Typography>
<Typography className="text-foreground">
Enter your email and password to Sign In.
</Typography>
<form action="#" className="mt-6">
<Input className="mb-4 mt-2 space-y-1.5">
<Typography
as="label"
htmlFor="email"
type="small"
color="default"
className="font-semibold"
>
Email
</Typography>
<Input.Field
id="email"
type="email"
placeholder="[email protected]"
/>
</Input>
<Input className="mb-4 space-y-1.5">
<Typography
as="label"
htmlFor="password"
type="small"
color="default"
className="font-semibold"
>
Password
</Typography>
<Input.Field
id="password"
type="password"
placeholder="************"
/>
</Input>
<div className="mb-4 flex items-center gap-2">
<Checkbox id="checkbox">
<Checkbox.Indicator />
</Checkbox>
<Typography
as="label"
htmlFor="checkbox"
className="text-foreground"
>
Remember Me
</Typography>
</div>
<Button isFullWidth>Sign In</Button>
</form>
<Typography
type="small"
className="mb-2 mt-3 flex items-center justify-center gap-1 text-foreground"
>
Don't have an account?
<Typography
type="small"
color="primary"
as="a"
href="#"
className="font-semibold"
>
Sign up
</Typography>
</Typography>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
import {
Dialog,
Button,
Input,
Checkbox,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogWithForm() {
return (
<Dialog size="sm">
<Dialog.Trigger as={Button}>Sign In</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
<Typography type="h6" className="mb-1">
Sign In
</Typography>
<Typography className="text-foreground">
Enter your email and password to Sign In.
</Typography>
<form action="#" className="mt-6">
<Input className="mb-4 mt-2 space-y-1.5">
<Typography
as="label"
htmlFor="email"
type="small"
color="default"
className="font-semibold"
>
Email
</Typography>
<Input.Field
id="email"
type="email"
placeholder="[email protected]"
/>
</Input>
<Input className="mb-4 space-y-1.5">
<Typography
as="label"
htmlFor="password"
type="small"
color="default"
className="font-semibold"
>
Password
</Typography>
<Input.Field
id="password"
type="password"
placeholder="************"
/>
</Input>
<div className="mb-4 flex items-center gap-2">
<Checkbox id="checkbox">
<Checkbox.Indicator />
</Checkbox>
<Typography
as="label"
htmlFor="checkbox"
className="text-foreground"
>
Remember Me
</Typography>
</div>
<Button isFullWidth>Sign In</Button>
</form>
<Typography
type="small"
className="mb-2 mt-3 flex items-center justify-center gap-1 text-foreground"
>
Don't have an account?
<Typography
type="small"
color="primary"
as="a"
href="#"
className="font-semibold"
>
Sign up
</Typography>
</Typography>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
#Dialog with Image
Use this example to create a dialog with image and some action inspired by Unsplash. You can use this dialog to show a preview of an image and some actions like download or share.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import {
Dialog,
Button,
Avatar,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Heart, ShareIos } from "iconoir-react";
export function DialogWithImage() {
return (
<Dialog size="xl">
<Dialog.Trigger>
<img
alt="nature"
src="https://dub.sh/xxo2Jek"
className="h-64 w-auto rounded-lg object-cover object-center"
/>
</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Avatar
size="md"
alt="alex andrew"
src="https://dub.sh/TdSBP0D"
/>
<div className="flex flex-col">
<Typography className="font-semibold">
Alex Andrew
</Typography>
<Typography type="small" className="text-foreground">
@alexandrew
</Typography>
</div>
</div>
<div className="flex items-center gap-2">
<IconButton size="sm" color="error" variant="ghost">
<Heart className="h-4 w-4" />
</IconButton>
<Button size="sm">Free Download</Button>
</div>
</div>
<div className="my-4">
<img
alt="nature"
src="https://dub.sh/xxo2Jek"
className="h-[48rem] w-full rounded-lg object-cover object-center"
/>
</div>
<div className="flex items-end justify-between">
<div className="flex items-center gap-16">
<div>
<Typography type="small" className="text-foreground">
Views
</Typography>
<Typography className="font-semibold">44,082,044</Typography>
</div>
<div>
<Typography type="small" className="text-foreground">
Downloads
</Typography>
<Typography className="font-semibold">553,031</Typography>
</div>
</div>
<Button size="sm" variant="ghost">
<ShareIos className="mr-1.5 h-4 w-4" /> Share
</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
import {
Dialog,
Button,
Avatar,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Heart, ShareIos } from "iconoir-react";
export function DialogWithImage() {
return (
<Dialog size="xl">
<Dialog.Trigger>
<img
alt="nature"
src="https://dub.sh/xxo2Jek"
className="h-64 w-auto rounded-lg object-cover object-center"
/>
</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Avatar
size="md"
alt="alex andrew"
src="https://dub.sh/TdSBP0D"
/>
<div className="flex flex-col">
<Typography className="font-semibold">
Alex Andrew
</Typography>
<Typography type="small" className="text-foreground">
@alexandrew
</Typography>
</div>
</div>
<div className="flex items-center gap-2">
<IconButton size="sm" color="error" variant="ghost">
<Heart className="h-4 w-4" />
</IconButton>
<Button size="sm">Free Download</Button>
</div>
</div>
<div className="my-4">
<img
alt="nature"
src="https://dub.sh/xxo2Jek"
className="h-[48rem] w-full rounded-lg object-cover object-center"
/>
</div>
<div className="flex items-end justify-between">
<div className="flex items-center gap-16">
<div>
<Typography type="small" className="text-foreground">
Views
</Typography>
<Typography className="font-semibold">44,082,044</Typography>
</div>
<div>
<Typography type="small" className="text-foreground">
Downloads
</Typography>
<Typography className="font-semibold">553,031</Typography>
</div>
</div>
<Button size="sm" variant="ghost">
<ShareIos className="mr-1.5 h-4 w-4" /> Share
</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
#Web 3 Dialog
Use this example to create a dialog with Web 3 wallet connection. You can use this dialog to provide a way for users to connect their Web 3 wallet to your website.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import {
Dialog,
Button,
Typography,
IconButton,
Avatar,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogWeb3() {
return (
<Dialog size="sm">
<Dialog.Trigger as={Button}>Connect Wallet</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content className="pb-4">
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
isCircular
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
<Typography type="h6">
Connect a Wallet
</Typography>
<Typography className="text-foreground">
Choose which card you want to connect
</Typography>
<div className="mt-4">
<Typography color="default" className="mb-2 font-semibold">
Popular
</Typography>
<div className="space-y-2">
<Button
isFullWidth
color="secondary"
className="flex items-center justify-center gap-2"
>
<img
alt="metamask"
src="https://docs.material-tailwind.com/icons/metamask.svg"
className="h-5 w-5"
/>
<Typography className="font-semibold">
Connect with MetaMask
</Typography>
</Button>
<Button
isFullWidth
color="secondary"
className="flex items-center justify-center gap-2"
>
<img
alt="metamast"
src="https://docs.material-tailwind.com/icons/coinbase.svg"
className="h-6 w-6 rounded"
/>
<Typography className="font-semibold">
Connect with Coinbase
</Typography>
</Button>
</div>
<Typography color="default" className="mb-2 mt-6 font-semibold">
Other
</Typography>
<Button
isFullWidth
color="secondary"
className="flex items-center justify-center gap-2"
>
<img
alt="metamast"
src="https://docs.material-tailwind.com/icons/trust-wallet.svg"
className="h-6 w-6 rounded"
/>
<Typography className="font-semibold">
Connect with Trust Wallet
</Typography>
</Button>
</div>
<div className="mt-12 flex w-full items-center justify-between gap-2">
<Typography type="small" className="text-foreground">
New to Ethereum wallets?
</Typography>
<Button variant="outline" color="secondary" size="sm">
Learn More
</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
import {
Dialog,
Button,
Typography,
IconButton,
Avatar,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogWeb3() {
return (
<Dialog size="sm">
<Dialog.Trigger as={Button}>Connect Wallet</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content className="pb-4">
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
isCircular
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
<Typography type="h6">
Connect a Wallet
</Typography>
<Typography className="text-foreground">
Choose which card you want to connect
</Typography>
<div className="mt-4">
<Typography color="default" className="mb-2 font-semibold">
Popular
</Typography>
<div className="space-y-2">
<Button
isFullWidth
color="secondary"
className="flex items-center justify-center gap-2"
>
<img
alt="metamask"
src="https://docs.material-tailwind.com/icons/metamask.svg"
className="h-5 w-5"
/>
<Typography className="font-semibold">
Connect with MetaMask
</Typography>
</Button>
<Button
isFullWidth
color="secondary"
className="flex items-center justify-center gap-2"
>
<img
alt="metamast"
src="https://docs.material-tailwind.com/icons/coinbase.svg"
className="h-6 w-6 rounded"
/>
<Typography className="font-semibold">
Connect with Coinbase
</Typography>
</Button>
</div>
<Typography color="default" className="mb-2 mt-6 font-semibold">
Other
</Typography>
<Button
isFullWidth
color="secondary"
className="flex items-center justify-center gap-2"
>
<img
alt="metamast"
src="https://docs.material-tailwind.com/icons/trust-wallet.svg"
className="h-6 w-6 rounded"
/>
<Typography className="font-semibold">
Connect with Trust Wallet
</Typography>
</Button>
</div>
<div className="mt-12 flex w-full items-center justify-between gap-2">
<Typography type="small" className="text-foreground">
New to Ethereum wallets?
</Typography>
<Button variant="outline" color="secondary" size="sm">
Learn More
</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
#Long Dialog
Use this example to create a scrollable dialog with long content. You can use this dialog to show a long text or content that requires scrolling.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import {
Dialog,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogLong() {
return (
<Dialog>
<Dialog.Trigger as={Button}>Long Dialog</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="mb-4 flex items-center justify-between gap-4">
<Typography type="h6">
Long Dialog
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
isCircular
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<div className="overflow-y-auto">
<Typography className="h-[80vh]">
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?
<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?
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>
</div>
<div className="mb-1 flex items-center justify-end gap-2 pt-4">
<Dialog.DismissTrigger as={Button} variant="ghost" color="error">
Cancel
</Dialog.DismissTrigger>
<Button color="success">Confirm</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
import {
Dialog,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogLong() {
return (
<Dialog>
<Dialog.Trigger as={Button}>Long Dialog</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<div className="mb-4 flex items-center justify-between gap-4">
<Typography type="h6">
Long Dialog
</Typography>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
isCircular
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
</div>
<div className="overflow-y-auto">
<Typography className="h-[80vh]">
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?
<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?
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>
</div>
<div className="mb-1 flex items-center justify-end gap-2 pt-4">
<Dialog.DismissTrigger as={Button} variant="ghost" color="error">
Cancel
</Dialog.DismissTrigger>
<Button color="success">Confirm</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
#Message Dialog
Use this example to create a dialog with a message form. You can use this dialog to create a message form for writing a messsage or comment in your website.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import {
Dialog,
Button,
Input,
Checkbox,
Typography,
IconButton,
Textarea,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogMessage() {
return (
<Dialog size="sm">
<Dialog.Trigger as={Button}>Message Dialog</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
<Typography type="h6" className="mb-1">
New message to @{" "}
</Typography>
<Typography className="text-foreground">
Write the message and then click button.
</Typography>
<form action="#" className="mt-6">
<Input isFullWidth className="mb-4 mt-2 space-y-1.5">
<Typography
as="label"
htmlFor="username"
type="small"
color="default"
className="font-semibold"
>
Username
</Typography>
<Input.Field id="username" type="text" placeholder="Username" />
</Input>
<div className="w-full space-y-1.5">
<Typography
as="label"
htmlFor="message"
type="small"
color="default"
className="font-medium"
>
Message
</Typography>
<Textarea id="message" placeholder="Your message..." />
</div>
<div className="mt-4 flex justify-end gap-2">
<Dialog.DismissTrigger as={Button} color="secondary">
Cancel
</Dialog.DismissTrigger>
<Button>Send Message</Button>
</div>
</form>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
import {
Dialog,
Button,
Input,
Checkbox,
Typography,
IconButton,
Textarea,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DialogMessage() {
return (
<Dialog size="sm">
<Dialog.Trigger as={Button}>Message Dialog</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content>
<Dialog.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
isCircular
color="secondary"
className="absolute right-2 top-2"
>
<Xmark className="h-5 w-5" />
</Dialog.DismissTrigger>
<Typography type="h6" className="mb-1">
New message to @{" "}
</Typography>
<Typography className="text-foreground">
Write the message and then click button.
</Typography>
<form action="#" className="mt-6">
<Input isFullWidth className="mb-4 mt-2 space-y-1.5">
<Typography
as="label"
htmlFor="username"
type="small"
color="default"
className="font-semibold"
>
Username
</Typography>
<Input.Field id="username" type="text" placeholder="Username" />
</Input>
<div className="w-full space-y-1.5">
<Typography
as="label"
htmlFor="message"
type="small"
color="default"
className="font-medium"
>
Message
</Typography>
<Textarea id="message" placeholder="Your message..." />
</div>
<div className="mt-4 flex justify-end gap-2">
<Dialog.DismissTrigger as={Button} color="secondary">
Cancel
</Dialog.DismissTrigger>
<Button>Send Message</Button>
</div>
</form>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
#Dialog Notification
Use this example to create a dialog with a notification. You can use this dialog to show a notification message to the user that requires their attention.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import { Dialog, Button, Typography } from "@material-tailwind/react";
import { AppNotification } from "iconoir-react";
export function DialogNotification() {
return (
<Dialog size="sm">
<Dialog.Trigger as={Button}>Open Notification</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content className="p-8">
<Typography type="h6" className="text-center">
Your Attention is Required!
</Typography>
<Typography className="text-center text-foreground">
Choose which card you want to connect
</Typography>
<div className="mt-12 flex flex-col items-center text-center">
<AppNotification className="mb-6 h-24 w-24" />
<Typography type="h6">
You should read this!
</Typography>
<Typography className="mt-2 text-center text-foreground">
Many people limit themselves by their own self-doubt, slowing
their progress. Fortunately, I was raised with the belief that I
could achieve anything.
</Typography>
</div>
<div className="mb-1 mt-8 flex items-center justify-center gap-2">
<Dialog.DismissTrigger as={Button} variant="ghost" color="error">
Cancel
</Dialog.DismissTrigger>
<Button>Got it</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
import { Dialog, Button, Typography } from "@material-tailwind/react";
import { AppNotification } from "iconoir-react";
export function DialogNotification() {
return (
<Dialog size="sm">
<Dialog.Trigger as={Button}>Open Notification</Dialog.Trigger>
<Dialog.Overlay>
<Dialog.Content className="p-8">
<Typography type="h6" className="text-center">
Your Attention is Required!
</Typography>
<Typography className="text-center text-foreground">
Choose which card you want to connect
</Typography>
<div className="mt-12 flex flex-col items-center text-center">
<AppNotification className="mb-6 h-24 w-24" />
<Typography type="h6">
You should read this!
</Typography>
<Typography className="mt-2 text-center text-foreground">
Many people limit themselves by their own self-doubt, slowing
their progress. Fortunately, I was raised with the belief that I
could achieve anything.
</Typography>
</div>
<div className="mb-1 mt-8 flex items-center justify-center gap-2">
<Dialog.DismissTrigger as={Button} variant="ghost" color="error">
Cancel
</Dialog.DismissTrigger>
<Button>Got it</Button>
</div>
</Dialog.Content>
</Dialog.Overlay>
</Dialog>
);
}
