Component Library
Browse and explore components
Dialog
A Dialog is a UI component that displays a modal window for user interactions, alerts, or confirmations.
Basic Dialog
Component Code
Copy Code
import React from 'react'
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
const BasicDialogCode = () => {
return (
<>
<div className='flex flex-wrap items-center gap-3 mt-4'>
<Dialog>
<DialogTrigger asChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button variant='secondary'>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button variant='warning'>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button variant='error'>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
</div>
</>
)
}
export default BasicDialogCode
Dialog With Custom Close
Component Code
Copy Code
import React from 'react'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Copy } from 'lucide-react'
const DialogWithCustomCloseCode = () => {
return (
<>
<div className='flex flex-wrap items-center gap-3 mt-4'>
<Dialog>
<DialogTrigger asChild>
<Button variant='outline'>Open Dialog</Button>
</DialogTrigger>
<DialogContent className='sm:max-w-md '>
<DialogHeader>
<DialogTitle>Share link</DialogTitle>
<DialogDescription>
Anyone who has this link will be able to view this.
</DialogDescription>
</DialogHeader>
<div className='flex items-center space-x-2'>
<div className='grid flex-1 gap-2'>
<Label htmlFor='link' className='sr-only'>
Link
</Label>
<Input
id='link'
defaultValue='https://ui.shadcn.com/docs/installation'
readOnly
/>
</div>
<Button type='submit' size='sm' className='px-3'>
<span className='sr-only'>Copy</span>
<Copy />
</Button>
</div>
<DialogFooter className='sm:justify-start'>
<DialogClose asChild>
<Button type='button' variant='error'>
Close
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button variant='outlinesecondary'>Open Dialog</Button>
</DialogTrigger>
<DialogContent className='sm:max-w-md '>
<DialogHeader>
<DialogTitle>Share link</DialogTitle>
<DialogDescription>
Anyone who has this link will be able to view this.
</DialogDescription>
</DialogHeader>
<div className='flex items-center space-x-2'>
<div className='grid flex-1 gap-2'>
<Label htmlFor='link' className='sr-only'>
Link
</Label>
<Input
id='link'
defaultValue='https://ui.shadcn.com/docs/installation'
readOnly
/>
</div>
<Button type='submit' size='sm' className='px-3'>
<span className='sr-only'>Copy</span>
<Copy />
</Button>
</div>
<DialogFooter className='sm:justify-start'>
<DialogClose asChild>
<Button type='button' variant='warning'>
Close
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button variant='outlinewarning'>Open Dialog</Button>
</DialogTrigger>
<DialogContent className='sm:max-w-md '>
<DialogHeader>
<DialogTitle>Share link</DialogTitle>
<DialogDescription>
Anyone who has this link will be able to view this.
</DialogDescription>
</DialogHeader>
<div className='flex items-center space-x-2'>
<div className='grid flex-1 gap-2'>
<Label htmlFor='link' className='sr-only'>
Link
</Label>
<Input
id='link'
defaultValue='https://ui.shadcn.com/docs/installation'
readOnly
/>
</div>
<Button type='submit' size='sm' className='px-3'>
<span className='sr-only'>Copy</span>
<Copy />
</Button>
</div>
<DialogFooter className='sm:justify-start'>
<DialogClose asChild>
<Button type='button' variant='error'>
Close
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button variant='outlineerror'>Open Dialog</Button>
</DialogTrigger>
<DialogContent className='sm:max-w-md '>
<DialogHeader>
<DialogTitle>Share link</DialogTitle>
<DialogDescription>
Anyone who has this link will be able to view this.
</DialogDescription>
</DialogHeader>
<div className='flex items-center space-x-2'>
<div className='grid flex-1 gap-2'>
<Label htmlFor='link' className='sr-only'>
Link
</Label>
<Input
id='link'
defaultValue='https://ui.shadcn.com/docs/installation'
readOnly
/>
</div>
<Button type='submit' size='sm' className='px-3'>
<span className='sr-only'>Copy</span>
<Copy />
</Button>
</div>
<DialogFooter className='sm:justify-start'>
<DialogClose asChild>
<Button type='button' variant='warning'>
Close
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</>
)
}
export default DialogWithCustomCloseCode
Dialog With Form
Component Code
Copy Code
import React from 'react'
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
const DialogWithFormCode = () => {
return (
<>
<div className='flex flex-wrap items-center gap-3 mt-4'>
<Dialog>
<DialogTrigger asChild>
<Button>Edit Profile</Button>
</DialogTrigger>
<DialogContent className='sm:max-w-[425px] '>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here. Click save when you're done.
</DialogDescription>
</DialogHeader>
<div className='grid gap-4 py-4'>
<div className='grid grid-cols-4 items-center gap-4'>
<Label htmlFor='name' className='text-right'>
Name
</Label>
<Input
id='name'
defaultValue='Pedro Duarte'
className='col-span-3'
/>
</div>
<div className='grid grid-cols-4 items-center gap-4'>
<Label htmlFor='username' className='text-right'>
Username
</Label>
<Input
id='username'
defaultValue='@peduarte'
className='col-span-3'
/>
</div>
</div>
<DialogFooter>
<Button type='submit'>Save changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button variant='secondary'>Edit Profile</Button>
</DialogTrigger>
<DialogContent className='sm:max-w-[425px] '>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
<DialogDescription>
Make changes to your profile here. Click save when you're done.
</DialogDescription>
</DialogHeader>
<div className='grid gap-4 py-4'>
<div className='grid grid-cols-4 items-center gap-4'>
<Label htmlFor='name' className='text-right'>
Name
</Label>
<Input
id='name'
defaultValue='Pedro Duarte'
className='col-span-3'
/>
</div>
<div className='grid grid-cols-4 items-center gap-4'>
<Label htmlFor='username' className='text-right'>
Username
</Label>
<Input
id='username'
defaultValue='@peduarte'
className='col-span-3'
/>
</div>
</div>
<DialogFooter>
<Button type='submit'>Save changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</>
)
}
export default DialogWithFormCode