Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/dialog.json

Usage

tsx
34 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export const metadata = generateComponentMetadata({
    name: "Dialog",
    description: "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
    category: "Overlay",
});


export default function MyComponent() {
  return (
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>Dialog description here.</DialogDescription>
        </DialogHeader>
        {/* Content */}
        <DialogFooter>
          <Button>Action</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Examples

Simple Dialog

Confirmation Dialog

Components

ComponentDescription
DialogThe root component that manages dialog state
DialogTriggerThe button that opens the dialog
DialogContentContains content rendered in the dialog
DialogHeaderContains the title and description
DialogTitleThe title of the dialog
DialogDescriptionThe description of the dialog
DialogFooterContains action buttons