Shadcn.io is not affiliated with official shadcn/ui
Checkout Gift Card
A checkout gift card and store credit redemption block for React and Next.js with card number input, PIN field, balance check, applied amount display, remaining card balance, multiple gift card support, and remaining payment method indicator built with shadcn/ui and Tailwind CSS
Accept gift cards and store credits at checkout with this React and Next.js block. Features a gift card number input with PIN field, a check balance button, applied amount display with remaining card balance, support for adding multiple gift cards, and a clear indicator of the remaining amount to pay with another method. Built with TypeScript, shadcn/ui Input and Button components, Lucide icons, and Tailwind CSS. Perfect for e-commerce checkout flows, gift card redemption interfaces, and multi-payment-method checkout pages.
Related Components
Checkout Upsell Cross-Sell
Upsell and cross-sell at checkout
Checkout Loyalty Points
Loyalty points redemption at checkout
Checkout Coupon Stacking
Multiple discount code stacking
Checkout Referral Credit
Referral credit application at checkout
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.
Free Trial
A free trial signup checkout for React and Next.js with plan details, 14-day trial duration, post-trial billing notice, payment method collection, and start trial CTA using shadcn/ui and Tailwind CSS
Gift Options
A checkout gift options block for React and Next.js with gift toggle, message textarea, gift wrapping selection with pricing, gift receipt switch, and recipient fields built with shadcn/ui and Tailwind CSS