Xzero UI
Pro library
ComponentsDialog

Dialog

A focused surface for decisions that need attention.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui/dialog
Live · keyboard ready

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/dialog

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@/components/xzero/dialog/dialog";
import { Button } from "@/components/xzero/button/button";

export function RenameProject() {
  return (
    <Dialog>
      <DialogTrigger asChild><Button>Rename</Button></DialogTrigger>
      <DialogContent title="Rename project" description="This changes the URL too.">
        <input defaultValue="Xzero" aria-label="Project name" />
        <DialogClose asChild><Button>Save</Button></DialogClose>
      </DialogContent>
    </Dialog>
  );
}

Examples

Confirm with a custom cancel

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent title="Delete project?" description="This cannot be undone.">
    <DialogClose asChild><Button variant="secondary">Cancel</Button></DialogClose>
    <Button onClick={remove}>Delete</Button>
  </DialogContent>
</Dialog>

API reference

Dialog

Root that tracks open state so the content can animate out. Controlled or uncontrolled.

PropTypeDefaultDescription
openboolean–Controlled open state.
defaultOpenbooleanfalseInitial open state when uncontrolled.
onOpenChange(open: boolean) => void–Called when the dialog opens or closes.
...propsComponentPropsWithoutRef<typeof DialogPrimitive.Root>–Other Radix Dialog root props, such as modal.

DialogTrigger

Radix Dialog.Trigger. Use asChild to wrap your own button.

PropTypeDefaultDescription
...propsComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>–Radix trigger props, including asChild.

DialogContent

Portaled overlay and panel with a titled header and built-in close button.

PropTypeDefaultDescription
title (required)string–Dialog title, rendered as Radix Dialog.Title. Changes crossfade while open.
descriptionstring–Optional supporting line, rendered as Dialog.Description.
children (required)ReactNode–Body content, usually a form or actions.
...propsComponentPropsWithoutRef<typeof DialogPrimitive.Content>–Radix content props such as className, onEscapeKeyDown, and onPointerDownOutside.

DialogClose

Radix Dialog.Close for custom cancel or confirm buttons.

PropTypeDefaultDescription
...propsComponentPropsWithoutRef<typeof DialogPrimitive.Close>–Radix close props, including asChild.

Keyboard interactions

KeysAction
EscapeCloses the dialog and returns focus to the trigger.
Tab / Shift+TabCycles focus within the dialog.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Also in overlays

Guidance for AI tools

Dialog: A focused surface for decisions that need attention. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components