A payment success modal that draws its ring and check, throws a small spark burst and counts the amount up. The receipt-style card ends in a perforated edge with a staggered list of details.
$1,284.00
npx shadcn@latest add https://hyperblur.dev/r/modal-success-check.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/modal-success-check.tsx.
import { ModalSuccessCheck } from "@/components/hyperblur/modal-success-check"
<ModalSuccessCheck open={paid} onOpenChange={setPaid} amount={1284} trigger={null} />| 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 | "Pay $1,284.00" | Label of the built-in trigger button, built from the amount by default. Pass null to hide it. |
| title | string | "Payment successful" | Heading under the check. |
| message | string | "A receipt is on its way to ana@northwind.studio." | Line under the amount. Empty string hides it. |
| amount | number | 1284 | Amount that counts up. |
| currency | string | "USD" | ISO currency code. |
| locale | string | "en-US" | Locale used to format the amount. |
| details | { label: string; value: string }[] | Paid to, Invoice, Method, Date | Receipt rows. An empty array hides the list. |
| doneLabel | string | "Done" | Primary button label. |
| receiptLabel | string | "View receipt" | Secondary button label. |
| onDone | () => void | undefined | Called by the primary button before closing. |
| onReceipt | () => void | undefined | Called by the receipt button. |
| accent | string | "#22c55e" | Accent color for the primary action, focus rings and highlights. |
| className | string | "" | Extra class on the root element. |