Get Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- React Hook Form
- Hover Card
- Input
- Input OTP
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll-area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Installation
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
import { Button } from "@/components/ui/button" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export function DialogDemo() { return ( <Dialog> <form> <DialogTrigger asChild> <Button variant="outline">Open Dialog</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"> <div className="grid gap-3"> <Label htmlFor="name-1">Name</Label> <Input id="name-1" name="name" defaultValue="Pedro Duarte" /> </div> <div className="grid gap-3"> <Label htmlFor="username-1">Username</Label> <Input id="username-1" name="username" defaultValue="@peduarte" /> </div> </div> <DialogFooter> <DialogClose asChild> <Button variant="outline">Cancel</Button> </DialogClose> <Button type="submit">Save changes</Button> </DialogFooter> </DialogContent> </form> </Dialog> ) } Installation
pnpm dlx shadcn@latest add dialog
Usage
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"<Dialog> <DialogTrigger>Open</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>Examples
Custom close button
import { Button } from "@/components/ui/button" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export function DialogCloseButton() { return ( <Dialog> <DialogTrigger asChild> <Button variant="outline">Share</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 gap-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> </div> <DialogFooter className="sm:justify-start"> <DialogClose asChild> <Button type="button" variant="secondary"> Close </Button> </DialogClose> </DialogFooter> </DialogContent> </Dialog> ) } Notes
To use the Dialog component from within a Context Menu or Dropdown Menu, you must encase the Context Menu or Dropdown Menu component in the Dialog component.
<Dialog> <ContextMenu> <ContextMenuTrigger>Right click</ContextMenuTrigger> <ContextMenuContent> <ContextMenuItem>Open</ContextMenuItem> <ContextMenuItem>Download</ContextMenuItem> <DialogTrigger asChild> <ContextMenuItem> <span>Delete</span> </ContextMenuItem> </DialogTrigger> </ContextMenuContent> </ContextMenu> <DialogContent> <DialogHeader> <DialogTitle>Are you absolutely sure?</DialogTitle> <DialogDescription> This action cannot be undone. Are you sure you want to permanently delete this file from our servers? </DialogDescription> </DialogHeader> <DialogFooter> <Button type="submit">Confirm</Button> </DialogFooter> </DialogContent> </Dialog>Deploy your shadcn/ui app on Vercel
Trusted by OpenAI, Sonos, Adobe, and more.
Vercel provides tools and infrastructure to deploy apps and features at scale.
Deploy to Vercel