4AF Components

Overlays and menus

Dialog

A focus-trapped Base UI modal with asymmetric enter and exit motion and optional phased content.

View as Markdown
⠋

Install

npx shadcn@latest add https://4af.selfsimilar.dev/r/dialog.json

Usage

import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogContent>
    <DialogTitle>Edit project</DialogTitle>
    Project settings
  </DialogContent>
</Dialog>

API

Main exports: Dialog, DialogTrigger, DialogClose, and its content, title, and footer parts; DialogSteps, DialogStep, and DialogPortalContainer

A centred modal with enter and exit motion and an optional validated multi-step flow.

Notes

Base UI handles focus trapping, dismissal, scroll locking, and labelling. DialogContent accepts portalContainer for a mount point of your own and backdropClassName for extra backdrop styling. DialogSteps animates between steps of different sizes. Its final Done button closes the dialog after optional validation; it does not save data or submit a form.

On this page