Shadcn.io is not affiliated with official shadcn/ui
Checkout Referral Credit
A checkout referral credit application block for React and Next.js with credit balance display, auto-apply toggle, applied credit amount, referral code input for new credits, and invite friends CTA built with shadcn/ui and Tailwind CSS
Apply referral credits at checkout with this React and Next.js block. Features a referral credit balance display, an auto-apply toggle that deducts credits from the order total, the applied credit amount with remaining balance, a referral code input for adding new credits from friends, and an invite friends CTA to earn more. Built with TypeScript, shadcn/ui Switch, Input, and Button components, Lucide icons, and Tailwind CSS. Perfect for referral program checkout flows, credit-based payment interfaces, and viral growth loop landing pages.
Related Components
Checkout Upsell Cross-Sell
Upsell and cross-sell at checkout
Checkout Loyalty Points
Loyalty points redemption at checkout
Checkout Gift Card
Gift card and store credit redemption
Checkout Coupon Stacking
Multiple discount code stacking
Checkout Promo Code
Promotional code entry at checkout
Checkout Order Summary
Order summary and totals display
FAQ
Was this page helpful?
Sign in to leave feedback.
Recurring Order
A recurring subscription order checkout with frequency selector, next delivery date, skip and pause options, subscription discount display, and first order vs recurring price comparison using shadcn/ui and Tailwind CSS
Refund Request
A refund and return request flow for React and Next.js with item selection checkboxes, return reason dropdowns, refund method choice, and estimated refund amount using shadcn/ui and Tailwind CSS