A payment success state where a ring draws, a check strokes in, dots burst outward and the amount and reference fade up.
Payment successful
$48.00
Reference NV-48210
npx shadcn@latest add https://hyperblur.dev/r/pay-success-check.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-success-check.tsx.
import { PaySuccessCheck } from "@/components/hyperblur/pay-success-check"
<PaySuccessCheck amount="$48.00" reference="NV-48210" />| Prop | Type | Default | Description |
|---|---|---|---|
| amount | string | "$48.00" | Amount text shown large under the title. |
| reference | string | "NV-48210" | Reference code in the receipt chip. Hidden when empty. |
| title | string | "Payment successful" | Headline under the check. |
| message | string | "A receipt is on its way to your inbox." | Secondary line. Hidden when empty. |
| accent | string | "#3ddc97" | Ring, check and glow color. |
| loop | boolean | false | Replay the whole animation on an interval. |
| loopDelay | number | 5200 | Milliseconds between replays when loop is on. Minimum 2500. |