Dialog
A modal surface with managed keyboard focus.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Dialog
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/dialog.json'Usage
A complete example using the installed component and hook paths.
Dialog usage
"use client";import { Button } from "@/components/ui/button";import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";function DialogPreview() { return ( <Dialog> <DialogTrigger render={<Button variant="outline" />}>Open dialog</DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Example dialog</DialogTitle> <DialogDescription>A focused surface for a short message.</DialogDescription> </DialogHeader> <DialogFooter> <DialogClose render={<Button variant="outline" />}>Done</DialogClose> </DialogFooter> </DialogContent> </Dialog> );}export default function Demo() { return <DialogPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Dialog
Dialog props
DialogPrimitive.Root.PropsDialogClose
DialogClose props
DialogPrimitive.Close.Props & { sound?: boolean }- sound
- true
DialogContent
DialogContent props
DialogPrimitive.Popup.Props & { showCloseButton?: boolean;}- showCloseButton
- true
DialogDescription
DialogDescription props
DialogPrimitive.Description.PropsDialogFooter
DialogFooter props
React.ComponentProps<"div"> & { showCloseButton?: boolean;}- showCloseButton
- false
DialogHeader
DialogHeader props
React.ComponentProps<"div">DialogOverlay
DialogOverlay props
DialogPrimitive.Backdrop.PropsDialogPortal
DialogPortal props
DialogPrimitive.Portal.PropsDialogTitle
DialogTitle props
DialogPrimitive.Title.PropsDialogTrigger
DialogTrigger props
DialogPrimitive.Trigger.Props & { sound?: boolean }- sound
- true