Dialog

Accessible modal built on the native dialog element.

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/r/dialog.json

Usage#

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

<Dialog>
  <DialogTrigger asChild>
    <Button>Edit profile</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>This is how teammates see you.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples#

Destructive

color tints the panel, its glow and every button inside. Typing the name unlocks the action.

Sizes

API reference#

Dialog

Holds the open state. Renders no element of its own.

Prop	Type	Default
`open`	`boolean` Controlled open state.	`—`
`defaultOpen`	`boolean` Initial state when uncontrolled.	`false`
`onOpenChange`	`(open: boolean) => void` Called when the trigger, a close button, Escape or the overlay asks to change state.	`—`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	`inherited`

DialogTrigger

Renders a button that opens the dialog. Also accepts every native button attribute.

Prop	Type	Default
`asChild`	`boolean` Merges trigger behaviour onto its single child element instead of rendering a button.	`false`

DialogContent

The overlay and panel, rendered in a native <dialog> on the top layer. Other props go to the panel.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"` Maximum panel width: 384, 512 or 672px.	`"md"`
`showClose`	`boolean` Shows the X button in the top-right corner.	`true`

DialogClose

Renders a button that closes the dialog. Also accepts every native button attribute.

Prop	Type	Default
`asChild`	`boolean` Merges close behaviour onto its single child element instead of rendering a button.	`false`

DialogHeader, DialogTitle, DialogDescription, DialogFooter

Layout and text parts. Each accepts the native attributes of its element.

Prop	Type	Default
`DialogTitle`	`h2` Labels the dialog through aria-labelledby.	`—`
`DialogDescription`	`p` Describes the dialog through aria-describedby, only while it's rendered.	`—`
`DialogFooter`	`div` Stacks actions on small screens and right-aligns them from sm up.	`—`

Accessibility#

Opens with showModal(), so the browser traps focus, makes the page inert and moves focus to the first focusable element.
Escape and clicks on the overlay close the dialog after its exit animation.
Focus returns to the element that opened the dialog, and page scroll is locked while it's open.
Always include a DialogTitle, even a visually hidden one, so the dialog has an accessible name.

PreviousToast Next Tooltip