Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button>Create API key</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Create API key</DialogTitle>
    </DialogHeader>
    <DialogBody>
      <div className="grid gap-4">
        <div className="grid gap-1.5">
          <Label htmlFor="key-name">Name</Label>
          <Input id="key-name" placeholder="Production" />
        </div>
        <div className="grid gap-1.5">
          <Label htmlFor="key-scope">Scope</Label>
          <Input id="key-scope" placeholder="Read + write" />
        </div>
      </div>
    </DialogBody>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Create key</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

function MultiStepDialogExample() {
  const [step, setStep] = React.useState(1);
  const total = 2;
  const isFirst = step === 1;
  const isLast = step === total;
  const titles = ["Refund", "Confirm"];
  return (
    <Dialog onOpenChange={(open) => { if (!open) setStep(1); }}>
      <DialogTrigger asChild>
        <Button>Open multi-step dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader className="flex-row items-center gap-3">
          {/* Back arrow ONLY on step 2+ — not on step 1 */}
          {!isFirst && (
            <Button
              variant="ghost"
              size="icon"
              className="-ml-2 size-8"
              onClick={() => setStep((s) => s - 1)}
              aria-label="Back"
            >
              <ArrowLeft weight="light" className="size-4" />
            </Button>
          )}
          <DialogTitle>{titles[step - 1]}</DialogTitle>
        </DialogHeader>
        <DialogBody>{/* per-step content */}</DialogBody>
        <DialogFooter className="sm:items-center sm:justify-between">
          <span className="text-xs font-medium text-muted-foreground">
            Step {step} of {total}
          </span>
          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:gap-2">
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            {isLast ? (
              <DialogClose asChild>
                <Button onClick={() => setStep(1)}>Issue refund</Button>
              </DialogClose>
            ) : (
              <Button onClick={() => setStep((s) => s + 1)}>Next</Button>
            )}
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Delete API key</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete API key</DialogTitle>
    </DialogHeader>
    <DialogBody>
      <p className="text-sm text-foreground/85">
        Are you sure you want to delete this API key? Any integrations
        using it will stop working immediately and this action cannot be
        undone.
      </p>
    </DialogBody>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Delete key</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

<Dialog>
  <DialogTrigger asChild>
    <Button>Invite user</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Invite user</DialogTitle>
    </DialogHeader>
    <DialogBody>
      <div className="grid gap-4">
        <div className="grid gap-1.5">
          <Label htmlFor="invite-email">Email</Label>
          <Input id="invite-email" placeholder="jane@company.com" />
        </div>
        <div className="grid gap-1.5">
          <Label htmlFor="invite-role">Role</Label>
          <Input id="invite-role" placeholder="Admin" />
        </div>
      </div>
    </DialogBody>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Send invite</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

<DialogContent>
  <DialogHeader className="flex-row items-center gap-3">
    <Info weight="light" className="size-4 shrink-0 text-primary" />
    <DialogTitle>Read-only mode</DialogTitle>
  </DialogHeader>
  <DialogBody>
    <p className="text-sm text-foreground/85">
      Your current role can view rules but not edit them. Contact an admin
      if you need write access to this workspace.
    </p>
  </DialogBody>
  <DialogFooter>
    <DialogClose asChild>
      <Button>Got it</Button>
    </DialogClose>
  </DialogFooter>
</DialogContent>

<DialogContent>
  <DialogHeader className="flex-row items-center gap-3">
    {/* Provider logo from Yuno CDN */}
    <img
      src="https://icons.prod.y.uno/stripe_logosimbolo.png"
      alt="Stripe"
      className="size-6 shrink-0 object-contain"
    />
    <DialogTitle>Connect Stripe</DialogTitle>
  </DialogHeader>
  <DialogBody>
    <p className="text-sm text-foreground/85">
      Enter your Stripe secret key to route payments through Stripe.
    </p>
  </DialogBody>
  <DialogFooter>
    <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
    <Button>Connect</Button>
  </DialogFooter>
</DialogContent>

<DialogContent>
  <DialogHeader>
    <DialogTitle>Dialog title</DialogTitle>
    <DialogDescription>
      Short helper text that complements the title.
    </DialogDescription>
  </DialogHeader>
  <DialogBody>
    {/* content */}
  </DialogBody>
  <DialogFooter>
    <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
    <Button>Save</Button>
  </DialogFooter>
</DialogContent>

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