{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "dialog",
"type": "registry:ui",
"title": "Dialog",
"description": "A modal window for a focused task, like editing a record. Blocks the page until closed.",
"dependencies": [
"lucide-react@^1.48.0",
"radix-ui@^1.6.7"
],
"registryDependencies": [
"https://blank.vageshwar.dev/r/theme.json",
"https://blank.vageshwar.dev/r/utils.json"
],
"files": [
{
"path": "ui/dialog.tsx",
"type": "registry:ui",
"content": "// BlankUI: dialog. Managed by BlankUI. Read dialog.md before editing. The title is a prop on DialogContent, on purpose.\nimport type { ComponentProps, ReactNode } from \"react\"\nimport { Dialog as DialogPrimitive, VisuallyHidden } from \"radix-ui\"\nimport { X } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A modal window. Use `open` and `onOpenChange` to control it, or let DialogTrigger open it.\n *\n * @example\n * \n */\nexport function Dialog(props: ComponentProps) {\n return \n}\n\n/** Opens the dialog. Use `asChild` with a Button. */\nexport function DialogTrigger(props: ComponentProps) {\n return \n}\n\n/** Closes the dialog. Use `asChild` with a Button. */\nexport function DialogClose(props: ComponentProps) {\n return \n}\n\nexport interface DialogContentProps extends Omit<\n ComponentProps,\n \"title\"\n> {\n /** Required. The dialog heading, also used as its accessible name. */\n title: ReactNode\n /** Short text under the title, also used as the accessible description. */\n description?: ReactNode\n /** Hide the title visually but keep it for screen readers. */\n hideTitle?: boolean\n /** Show the X button in the corner. Defaults to `true`. */\n showCloseButton?: boolean\n /** Width. Defaults to `md`. */\n size?: \"sm\" | \"md\" | \"lg\"\n}\n\nconst sizeClass = { sm: \"max-w-sm\", md: \"max-w-lg\", lg: \"max-w-2xl\" } as const\n\n/** The dialog window. Renders the title and description for you. */\nexport function DialogContent({\n title,\n description,\n hideTitle = false,\n showCloseButton = true,\n size = \"md\",\n className,\n children,\n ...props\n}: DialogContentProps) {\n const heading = (\n \n {title}\n \n )\n return (\n \n \n \n
\n {children}\n {showCloseButton && (\n \n \n \n )}\n \n \n )\n}\n\n/** Buttons at the bottom of the dialog. The main action goes last. */\nexport function DialogFooter({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n )\n}\n"
},
{
"path": "ui/dialog.md",
"type": "registry:ui",
"content": "---\nname: dialog\ntitle: Dialog\ndescription: A modal window for a focused task, like editing a record. Blocks the page until closed.\ncategory: overlay\nwhenToUse:\n - A short focused task, like editing a profile or creating an item.\n - Content that needs the user's full attention before going back to the page.\nwhenNotToUse:\n - when: Asking the user to confirm a destructive or important action.\n use: alert-dialog\n - when: Long forms, filters or navigation that work better at the edge of the screen.\n use: sheet\n - when: A few extra controls next to a button, without blocking the page.\n use: popover\n - when: A short text hint on hover.\n use: tooltip\n - when: Telling the user something happened.\n use: toast\nrelated: [alert-dialog, sheet, popover, button]\nrequiredParts: [Dialog, DialogTrigger, DialogContent, DialogFooter, DialogClose]\nantiPatterns:\n - avoid: \"... (shadcn style)\"\n instead: ' (BlankUI renders the header)'\n - avoid: \"A Dialog with no visible title\"\n instead: ' keeps it for screen readers'\n - avoid: \"Using Dialog to confirm a delete\"\n instead: \"\"\n - avoid: \" (a button inside a button)\"\n instead: ''\n---\n\n# Dialog\n\nThe title is a prop on `DialogContent`, so a dialog can never be missing its accessible name. BlankUI does not export `DialogHeader`, `DialogTitle` or `DialogDescription`.\n\n## Import\n\n```tsx\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogFooter,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\n```\n\n## Example\n\n```tsx\n\n```\n\n## Controlled\n\n```tsx\nconst [open, setOpen] = useState(false)\n\n\n```\n\n## DialogContent props\n\n- `title` (required), `description`\n- `hideTitle`: keeps the title for screen readers only\n- `size`: `sm`, `md` (default), `lg`\n- `showCloseButton`: defaults to `true`\n"
}
],
"docs": "Read components/ui/dialog.md before using Dialog. Docs: https://blank.vageshwar.dev/docs/dialog",
"meta": {
"category": "overlay",
"requiredParts": [
"Dialog",
"DialogTrigger",
"DialogContent",
"DialogFooter",
"DialogClose"
],
"related": [
"alert-dialog",
"sheet",
"popover",
"button"
]
}
}