For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
1
Sponsor

Dialog

PreviousNext

Modal surfaces with three widths and nested overlays.

Preview

Sizes

Nested overlays

Installation

$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/dialog.json

Usage

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
 
<Dialog>
  <DialogTrigger render={<Button />}>Open settings</DialogTrigger>
  <DialogContent size="small">
    <DialogTitle>Settings</DialogTitle>
    <DialogDescription>Manage your preferences.</DialogDescription>
  </DialogContent>
</Dialog>;

API Reference

Root exposes Base UI Dialog state and dismissal props; existing sounds remains supported. Content size: small (400px), default (540px), large (880px), narrowed to 360/480/800px in compact density. Content is constrained to the viewport and scrolls when needed. showCloseButton defaults to true. Header, Footer, Title, Description, Close, Overlay and Portal are exported. Include a Title. The nested overlays example includes Select, DropdownMenu and Tooltip for nested surface and focus testing.