Dialog

A modal panel window with a close button in the traffic light position.

@cupertinoui/dialogBase UI Dialog Registry JSON

"use client"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="secondary" />}>New Folder…</DialogTrigger>
      <DialogContent className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>New Folder</DialogTitle>
          <DialogDescription>Enter a name for the new folder.</DialogDescription>
        </DialogHeader>
        <div className="grid grid-cols-[auto_1fr] items-center gap-3">
          <Label htmlFor="folder-name">Name:</Label>
          <Input id="folder-name" defaultValue="untitled folder" />
        </div>
        <DialogFooter>
          <DialogClose render={<Button variant="secondary" />}>Cancel</DialogClose>
          <DialogClose render={<Button />}>Create</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/dialog

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>New Folder</DialogTitle>
      <DialogDescription>Enter a name for the new folder.</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

API Reference

Every part forwards the props of the underlying Base UI Dialog part. The props below are the ones CupertinoUI adds or changes.

DialogContent

Prop	Type	Description
`showCloseButton`	`boolean` Default: `true`	Shows the red close button in the traffic light position.
`className`	`string`	Extra classes, merged with the component's own.