Primitive Adaptersregistry/ui/dialog.tsx/r/dialog.json

Dialog

Native modal <dialog> adapter with .showModal(), screentone backdrop, light-dismiss fallback, and sequential cut label.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Native modal <dialog> with screentone backdrop:

Dark · Flashback.f12-theme-dark

Interactive preview

Native modal <dialog> with screentone backdrop:

Install & copy-in source

shadcn CLI (dialog.json)

npx shadcn@latest add https://frame12.dev/r/dialog.json

Usage example (Dialog)

import {
  Dialog, DialogTrigger, DialogContent, DialogHeader,
  DialogTitle, DialogDescription, DialogFooter, DialogClose,
} from '@/components/frame12';

export function ConfirmModal() {
  return (
    <Dialog>
      <DialogTrigger variant="marker">Open Modal</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Rotate webhook secret?</DialogTitle>
          <DialogDescription>Active endpoints will verify both keys for 24 hours.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose variant="secondary">Cancel</DialogClose>
          <DialogClose variant="primary">Confirm</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Uses native HTML <dialog> with .showModal() so the browser marks background content inert automatically.
Links DialogTitle via aria-labelledby and supports Escape key + backdrop click dismissal.

GrammarFRAME/12 rules

Design grammar

Installs into components/frame12/dialog.tsx with 2.5px ink borders and a 6px × 6px screentone backdrop without overwriting existing components/ui/ files.

Props & TypeScript API