Dialog

Base UI

A modal with a hard shadow. Focus stays inside and returns when it closes.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/dialog.json

Also installs @base-ui/react.

Usage

import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@/components/spotcheck/dialog"
import { Button } from "@/components/spotcheck/button"

<Dialog>
  <DialogTrigger render={<Button variant="ink" />}>New key</DialogTrigger>
  <DialogContent title="New API key" description="It's shown once.">
    <DialogClose render={<Button />}>Done</DialogClose>
  </DialogContent>
</Dialog>

Props

title * RequiredstringDefault —
descriptionstringDefault —
classNamestringDefault —

Keyboard

Esc	Close and return focus
Tab	Move inside the dialog

Reduced motion

The dialog appears without its short slide.