Dialog

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

Dialog

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DialogPrimitive.Root>

DialogClose

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DialogPrimitive.Close>

DialogContent

className
children
showCloseButton = true

React.ComponentProps<typeof DialogPrimitive.Content> & { showCloseButton?: boolean; }

DialogDescription

className

React.ComponentProps<typeof DialogPrimitive.Description>

DialogFooter

className

React.ComponentProps<"div">

DialogHeader

className

React.ComponentProps<"div">

DialogOverlay

className

React.ComponentProps<typeof DialogPrimitive.Overlay>

DialogPortal

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DialogPrimitive.Portal>

DialogTitle

className

React.ComponentProps<typeof DialogPrimitive.Title>

DialogTrigger

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof DialogPrimitive.Trigger>

Code

// owner: Sona
"use client";

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

export default function DialogExample() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open settings</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Update user</DialogTitle>
          <DialogDescription>
            Change the display name or email.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" defaultValue="Nova Patel" className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="email" className="text-right">
              Email
            </Label>
            <Input
              id="email"
              type="email"
              defaultValue="nova@studio.ai"
              className="col-span-3"
            />
          </div>
        </div>
        <DialogFooter>
          <Button type="submit">Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Dialog

Component preview

On this page

Command Palette