Modal

import { Dialog } from "@/components/ui/dialog";

import { TriangleAlertIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";

export function Example() {
  return (
    <Dialog
      type="confirm"
      trigger={
        <Button>
          <TriangleAlertIcon />
          Delete account
        </Button>
      }
      title="Are you absolutely sure?"
      description="This action cannot be undone."
      action={{ label: "Continue" }}
    />
  );
}

One flat component, two modes — pick via the `type` prop:

<Dialog />                              (default — content dialogs, dismissable)
├── type="default"                      (or omit)
├── trigger={<Button>…</Button>}
├── title / description
├── footer={<>…</>}                     (any JSX — wrap <DialogClose render={…}> for auto-close)
├── showCloseButton                     (toggle the × in the corner; defaults to true)
├── sidebar={[{ label, items: [{ icon|avatar, label, description, content, action }] }]}
│                                       (settings-13 layout — grouped left nav + section-header panel)
├── initialFocus                        (ref to focus on open, or false to skip)
└── children                            (body)

<Dialog type="confirm" />               (alert / confirm dialogs — blocks backdrop dismiss)
├── trigger
├── title / description                 (rich JSX is fine)
├── cancel={{ label } | <JSX/> | false} (defaults to "Cancel"; `false` to omit)
├── action={{ label, onClick, variant } | <JSX/>}
├── media={<Icon/>}                     (optional featured icon above the title)
├── size="default" | "sm"
└── children                            (extra body between description and footer)

Need a fullscreen layout, multi-step content, or a custom close-button
position? The slot exports — `DialogRoot` and its `{Trigger, Content, Header,
Title, Description, Footer, Close, Cancel, Action, Media}` subcomponents — are
still exported as the escape hatch.