A centered dialog that grows out of the exact button that opened it and shrinks back into it on close. Ships as a deploy confirmation with branch, checks and a publish button that fills while it works.
This replaces the live site for 14,203 monthly visitors. You can roll back from Deployments.
npx shadcn@latest add https://hyperblur.dev/r/modal-zoom-origin.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-zoom-origin.tsx.
import { ModalZoomOrigin } from "@/components/hyperblur/modal-zoom-origin"
<ModalZoomOrigin trigger="Publish" onConfirm={() => deploy()} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Controlled open state. Leave undefined to let the component manage it. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. Defaults to true when embedded so the preview shows the dialog. |
| onOpenChange | (open: boolean) => void | undefined | Called whenever the dialog opens or closes. |
| embedded | boolean | false | Renders the dialog inside its parent (absolute, not fixed) without scroll lock, for previews and docs. |
| trigger | ReactNode | null | "Publish" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| title | string | "Publish to production" | Dialog heading. |
| description | string | "This replaces the live site…" | Supporting line under the heading. |
| branch | string | "feat/billing-v2" | Source branch shown in the merge chip. |
| target | string | "main" | Target branch shown in the highlighted chip. |
| checks | { label: string; detail: string; state?: "pass" | "warn" }[] | 3 deploy checks | Rows listed before the actions, each with a pass or warning icon. |
| confirmLabel | string | "Publish now" | Primary button label. |
| onConfirm | () => void | undefined | Called when publishing completes, right before the dialog zooms back. |
| accent | string | "#2f7bff" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |