Component

Dialog

A modal task surface built on the browser dialog top layer.

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add dialog

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose } from '@nimjs/ui';

export function Example() {
  return (
    <Dialog>
      <DialogTrigger>Open settings</DialogTrigger>
      <DialogContent>
        <DialogTitle>Settings</DialogTitle>
        <DialogDescription>Update your preferences.</DialogDescription>
        <DialogClose>Done</DialogClose>
      </DialogContent>
    </Dialog>
  );
}

System metadata

Registry

dialog

Category: overlays

Status: preview

Version marker: 0.0.0 (unreleased)

Files

dialog.tsx

Tokens

bordercardcard-foregroundforegroundmuted-foregroundradius

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

focus visiblekeyboard accessiblenative semanticsscreen reader readable

Anatomy

Dialog

Open state owner.

DialogTrigger

Native button that opens the modal.

DialogContent

Native dialog with backdrop and focus handling.

DialogTitle

Accessible title.

DialogDescription

Accessible description.

DialogClose

Native button that closes the modal.

Usage patterns

modal workflow

Use for a short focused task. Include title and description in the content.

API and states

Use open and onOpenChange for controlled state, or defaultOpen for uncontrolled state. DialogTrigger and DialogClose are native buttons. DialogContent uses showModal and the browser top layer.

Accessibility

Include DialogTitle and DialogDescription in the content. Escape closes the modal, focus returns to the trigger, and the browser confines focus while it is open. Outside clicks dismiss the dialog.