A card slides into checkout, a spinner processes the charge and a check draws itself in with a burst, stepping through a three-stage tracker on a gentle loop.
illustrationsvgpaymentcheckoutfintechsuccessloopempty state
Installation
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/payment-flow
Usage
usage.tsx
1import { PaymentFlow } from "@/components/illustrations/payment-flow";
2
3export function CheckoutPromo() {
4 return <PaymentFlow amount="$49.00" merchant="Relay · Team plan" className="w-[440px]" />;
5}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
amount | string | "$48.00" | Amount shown on the checkout and success screens. |
merchant | string | "Northwind Coffee" | Merchant name on the checkout screen. |
speed | number | 1 | Speed multiplier for the loop (about seven seconds at 1). |
title | string | — | Accessible description of the scene. |
className | string | — | Classes for the SVG; set a width, height follows. |
Accessibility
- Rendered as a single SVG with role="img" and an aria-label you can override with `title`.
- Under prefers-reduced-motion the scene renders its key frame as a still image: no loops, no timers.
- Colours come from the GetUrUI tokens, so the scene follows light and dark themes automatically.