Actions & overlays@neumorphism-ui/dialog

Dialog

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.

@neumorphism-ui/dialog

Registry JSON

Preview

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

Installation

npx shadcn@latest add @neumorphism-ui/dialog

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

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

Import

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

Example

<Dialog>
  <DialogTrigger render={<Button variant="primary" />}>
    Create project
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>New project</DialogTitle>
      <DialogDescription>
        You can change the name and description later.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="soft" />}>Cancel</DialogClose>
      <Button variant="primary">Create</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

API Reference

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.