Dialog

Shadcn compatible modal dialog on Base UI with a blurred backdrop, enter and exit animation, close button, header, title, description and a footer bar.

src/registry/ui/dialog.tsx/r/dialog.json

Basic

Installation#

bash

npx shadcn@latest add @minidev/dialog

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/dialog.json

Usage#

tsx

import { Dialog } from "@/components/ui/dialog"

export function Example() {
  return (
    <Dialog>
      <DialogTrigger className={cn(buttonVariants())}>Open dialog</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Confirm delete</DialogTitle>
          <DialogDescription>This cannot be undone.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline">Cancel</Button>
          <Button variant="destructive">Delete</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

API reference#

Also accepts every prop of DialogPrimitive.Root props, passed through to the root element.

Dependencies#

npm

@base-ui/reactlucide-react

Built from

Examples#

OverlaysDialog, sheet, popover

Alert DialogShadcn style alert dialog on Base UI for confirmations that need an explicit answer. Modal backdrop, focus trap, title, description and an actions row.Command DialogCommand dialog that opens the command palette in a modal from a list of commands with labels and handlers. Wire it to a Cmd K shortcut in your React app.Confirm DestructiveDestructive action confirm: a red trigger button opens a dialog with a title, warning text, Cancel and Confirm. Labels are configurable for deletes and resets.Context MenuRight click context menu that opens at the cursor with menu items, including destructive items in red. Closes on selection or click outside, in React.DrawerBottom drawer that slides a sheet up from the screen edge with a titled header, close button and scrolling body, capped at 80% of the viewport height.Dropdown MenuShadcn compatible dropdown menu on Base UI with groups, labels, checkbox and radio items, submenus, shortcuts, separators and destructive items.

All dialog, drawer and popover components

Learn more

Add a Cmd+K command palette to your React appGuide Glassmorphism in Tailwind CSS v4: frosted glass that stays readableGuide Generate QR codes in React with no dependencyGuide Accessible modal and drawer in React: focus, scroll lock, Escape, return focusGuide What is ARIA?Glossary What is backdrop-filter (CSS)?Glossary What is Base UI?Glossary