A high-stakes confirmation that shows ownership moving between two people and stays locked until the user ticks an acknowledgement. On success the crown hops from one avatar to the other.
Jordan becomes the owner and takes over billing the moment you confirm.
npx shadcn@latest add https://hyperblur.dev/r/dialog-transfer-confirm.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dialog-transfer-confirm.tsx.
import { DialogTransferConfirm } from "@/components/hyperblur/dialog-transfer-confirm"
<DialogTransferConfirm onConfirm={() => api.transferOwnership(userId)} />| 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 | "Transfer ownership" | Label of the built-in trigger button. Pass null to hide it and control the dialog with open. |
| workspace | string | "Acme Robotics" | Name used in the heading. |
| description | string | Built from the new owner's name | Line under the heading. |
| from | { name: string; role: string; colors?: [string, string] } | Sam Okafor, Owner | Current owner. colors sets the avatar gradient. |
| to | { name: string; role: string; colors?: [string, string] } | Jordan Lee, Admin | New owner. |
| consequences | string[] | 3 rows | What changes after the transfer. An empty array hides the list. |
| acknowledgement | string | "I understand only the new owner can transfer it back." | Checkbox text that unlocks the confirm button. |
| confirmLabel | string | "Transfer ownership" | Confirm button label. |
| onConfirm | () => void | Promise<void> | undefined | Runs on confirm. Return a promise to keep the button busy; a rejection shows an inline error. |
| accent | string | "#f43f5e" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |