Dialog
@/components/kamod-ui/dialog
Installation
Install `@kamod-ch/ui`, then compose `Dialog`, `DialogTrigger`, and `DialogContent` as in the snippet below. The default modal is centered; for immersive full-viewport layouts use `presentation="slot"` and apply overlay + panel classes on `DialogContent` yourself (see Usage).
pnpm add @kamod-ch/uiUsage
Default `DialogContent` is `presentation="modal"` (backdrop + centered panel). If your code used to put **`fixed inset-0`**, **`flex items-center justify-center`**, and **`bg-black/50`** on `DialogContent` itself, you must set **`presentation="slot"`** — otherwise you get two backdrops and a nested centered shell. Same pattern as `AlertDialogContent` and the docs “View Markdown” dialog. Width-only classes like `sm:max-w-md` on modal are fine without slot. `lockBodyScroll` defaults to true on `Dialog`.
import { Dialog } from "@/components/kamod-ui/dialog";<Dialog />Custom layout: presentation="slot"
Use when you own the full-screen overlay (fixed inset-0, dimmed backdrop, flex center). Without slot, the default modal adds its own overlay + panel on top.
Demo
Form in a dialog with FieldGroup — matches shadcn DialogDemo structure.
Basic
Minimal title and description.
Custom close
Primary dismiss control in the footer; `showCloseButton={false}` removes the corner X.
Scrollable content
Long content in a scroll region; header stays above.
Destructive actions
Footer with cancel and destructive confirm.
API Reference
Props, slots and variants for this component.
Dialog
Dialog component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| Dialog lockBodyScroll | boolean | true |
| open / onOpenChange | controlled | optional |
| defaultOpen | boolean | false |
| DialogContent presentation | "modal" | "slot" | "modal" — use "slot" if DialogContent has fixed inset-0 overlay |
| DialogContent showCloseButton | boolean | true (modal only) |
| DialogContent forceMount | boolean | false |
| DialogTrigger / DialogClose asChild | boolean | false |
Accessibility Notes
The modal panel is focusable (tabIndex -1), traps focus while open, closes on Escape, and returns focus to the trigger. DialogTitle and DialogDescription wire aria-labelledby and aria-describedby automatically; override via props on DialogContent when needed. Hide the default close control only when another explicit dismiss action exists. For custom fullscreen overlays, use presentation="slot" so assistive tech and focus stay on one dialog surface (no duplicate modal shells).