Dialog

A panel over a dimmed page: a black header bar with a tilted title, a body, and the actions. It opens out of its centre and folds back faster.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/dialog

Examples

Confirm before taking a job

dialog-basic.tsx

import { Button } from "@/components/zero/button";import {  Dialog,  DialogBody,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/zero/dialog";import { ArrowRightIcon } from "@/components/zero/icons";export default function DialogBasic() {  return (    <Dialog>      <DialogTrigger render={<Button />}>Take the job</DialogTrigger>      <DialogContent>        <DialogHeader>          <DialogTitle>Take this job?</DialogTitle>          <DialogDescription>            Escort a sealed crate through the rail yards.          </DialogDescription>        </DialogHeader>        <DialogBody>          <p className="text-zero-text-2">            The crate has to reach the north gate before the night shift. You            can hand the job back until you pick it up.          </p>        </DialogBody>        <DialogFooter>          <DialogClose render={<Button variant="secondary" />}>            Not now          </DialogClose>          <DialogClose render={<Button />}>            Take it            <ArrowRightIcon />          </DialogClose>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Behaviour

Focus moves into the dialog when it opens and back to the trigger when it closes; Escape or a click on the dimmed page closes it. Under reduced motion it only fades.

Give the trigger and the closing buttons zeroUI Buttons through render, as in the example. The corner close button is there by default; showClose={false} removes it.

Props

DialogContent

Prop	Type	Default	Description
showClose	boolean	true	The close button in the header's corner.

Also takes every prop of Base UI's Dialog.Popup.

Dialog

Prop	Type	Default	Description
open	boolean	—	Open, controlled; with onOpenChange.
defaultOpen	boolean	false	Open, uncontrolled.

Also takes every prop of Base UI's Dialog.Root.

DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter

Also takes every prop of Base UI's Dialog.Title.