All components
OrderConfirmationCard
Post-purchase success hero with order # + total + next-step list + CTAs.
components/order-confirmation-card.tsxPeer deps:
lucide-reactLive preview
Order confirmed.
Thanks for your order. We've sent a confirmation to buyer@example.com with your receipt and access details.
Order #2026-1042
Items1 item
Total paid$149.00
What happens next
- GitHub invite arriving in your inbox within 60 seconds.
- Receipt sent to buyer@example.com.
- Pull updates anytime with `git pull origin main`.
Usage
import { OrderConfirmationCard } from "@/components/order-confirmation-card";
<OrderConfirmationCard
orderNumber={order.number}
customerEmail={order.email}
totalCents={order.totalCents}
itemCount={order.items.length}
primaryCta={{ label: "View order", href: `/orders/${order.id}` }}
nextSteps={[
"GitHub invite arriving within 60 seconds.",
"Receipt sent to your email.",
]}
/>