BlankUI

overlay

Dialog

A modal window for a focused task, like editing a record. Blocks the page until closed.

npx blankui add dialog
Raw markdown for agentsRegistry JSON

When to use

  • A short focused task, like editing a profile or creating an item.
  • Content that needs the user's full attention before going back to the page.

Use something else when

  • Asking the user to confirm a destructive or important action. Use alert-dialog.
  • Long forms, filters or navigation that work better at the edge of the screen. Use sheet.
  • A few extra controls next to a button, without blocking the page. Use popover.
  • A short text hint on hover. Use tooltip.
  • Telling the user something happened. Use toast.

The title is a prop on DialogContent, so a dialog can never be missing its accessible name. BlankUI does not export DialogHeader, DialogTitle or DialogDescription.

Import

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogTrigger,
} from "@/components/ui/dialog"

Example

<Dialog>
  <DialogTrigger asChild>
    <Button>Edit profile</Button>
  </DialogTrigger>
  <DialogContent title="Edit profile" description="Changes are saved when you click Save.">
    <Stack gap={4}>
      <Field label="Name">
        <Input defaultValue="Ada" />
      </Field>
    </Stack>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button type="submit">Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Controlled

const [open, setOpen] = useState(false)

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent title="Invite people">...</DialogContent>
</Dialog>

DialogContent props

  • title (required), description
  • hideTitle: keeps the title for screen readers only
  • size: sm, md (default), lg
  • showCloseButton: defaults to true

Mistakes to avoid

AvoidInstead
<DialogHeader><DialogTitle>...</DialogTitle></DialogHeader> (shadcn style)<DialogContent title="..." description="..."> (BlankUI renders the header)
A Dialog with no visible title<DialogContent title="Search" hideTitle> keeps it for screen readers
Using Dialog to confirm a delete<AlertDialog>
<DialogClose><Button>Cancel</Button></DialogClose> (a button inside a button)<DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/dialog.json