Dialog

Use Dialog for a focused task that needs a temporary surface over the current page.

Preview

Edit a profile

Open a dialog with name and username inputs, then dismiss it with Cancel or the illustrative Save button.

Open it to test the focus trap and Escape-to-close behavior.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/dialog

Install the shared base once, then add components and their dependencies with the CLI.

Edit a profile

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/dialog @neumorphism-ui/input @neumorphism-ui/label

Registry JSON

Usage

Compose DialogTrigger and DialogContent inside Dialog. Add a title and description, then use DialogClose for cancellation and an application handler for the main action.

"use client";

import { Button } from "@/components/ui/button";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Project details</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Team workspace</DialogTitle>
          <DialogDescription>Manage your projects in one place.</DialogDescription>
        </DialogHeader>
        <DialogFooter><DialogClose render={<Button />}>Close</DialogClose></DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

API Reference

Built on Base UI Dialog to compose a Portal, Backdrop, Popup, title, description, and close actions. The primitive handles Escape, outside clicks, focus trapping, and focus restoration.

Component	Prop	Type	Default	Description
`Dialog`	`open / defaultOpen`	`boolean`	`false`	The controlled open state or initial uncontrolled open state.
`Dialog`	`onOpenChange`	`(open: boolean) => void`	`—`	Called when the open state changes.
`Dialog`	`modal`	`boolean`	`true`	Determines background interaction and focus-trap behavior.
`DialogTrigger / DialogClose`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	Composes trigger or close behavior onto a button or link.
`DialogContent`	`showCloseButton`	`boolean`	`true`	Displays the default close button in the upper-right corner.
`DialogContent`	`overlayClassName`	`string \| (state) => string`	`—`	Extends the Backdrop color, blur, and transition independently.
`Dialog`	`disablePointerDismissal`	`boolean`	`false`	Prevents an outside pointer press from closing Dialog.

Preview

Edit a profile

Installation

Usage

API Reference

Accessibility