Shadcn.io is not affiliated with official shadcn/ui
Checkout 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
Add gift-giving functionality to your checkout with this gift options block for React and Next.js. Features a gift toggle that reveals a message textarea, gift wrapping with a clear price add-on, gift receipt switch, and recipient name and email fields. Built with TypeScript, shadcn/ui Checkbox, Switch, Textarea, Input, and Button components, and Tailwind CSS. Perfect for e-commerce holiday checkouts, gifting marketplaces, and subscription gift flows.
Related Components
Saved Cards
Saved payment method selection
Billing Address
Billing address form with shipping toggle
Tax Calculator
Tax breakdown and exempt options
Trust Badges
Security indicators in checkout
Order Summary
Order summary with line items
Donation Checkout
Checkout with donation options
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Grouped Items
A checkout cart block that organizes items by category with collapsible groups, item counts per group, individual item details, and group subtotals for managing large diverse carts