Dialog

A modal dialog component that overlays the page content. Built on Base UI Dialog primitives.

Usage

import {
  DialogRoot,
  DialogTrigger,
  DialogPortal,
  DialogBackdrop,
  DialogPopup,
  DialogTitle,
  DialogDescription,
  DialogClose,
  DialogHeader,
  DialogFooter,
} from "@/components/ui/static/dialog"

<DialogRoot>
  <DialogTrigger>Open</DialogTrigger>
  <DialogPortal>
    <DialogBackdrop />
    <DialogPopup>
      <DialogClose />
      <DialogHeader>
        <DialogTitle>Title</DialogTitle>
        <DialogDescription>Description</DialogDescription>
      </DialogHeader>
      {/* Content */}
      <DialogFooter>
        <button>Save</button>
      </DialogFooter>
    </DialogPopup>
  </DialogPortal>
</DialogRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react @phosphor-icons/react

Examples

API Reference

openboolean

Controlled open state of the dialog.

onOpenChange(open: boolean) => void

Callback when open state changes.

modalboolean

=true

Whether to render a modal or non-modal dialog.