Order Summary 7 - With gift optionsPro
An order summary with a gift toggle that reveals wrapping choices, a character-limited gift message and a hide-prices-on-receipt option, all reflected in the totals. Use it for gifting-heavy stores and holiday checkouts where shoppers send orders to someone else.
About Order Summary 7
An order summary with a gift toggle that reveals wrapping choices, a character-limited gift message and a hide-prices-on-receipt option, all reflected in the totals. Use it for gifting-heavy stores and holiday checkouts where shoppers send orders to someone else.
Order Summary 7 is a pro order summary block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 109 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- ecommerce
- order summary
- gift
- wrapping
- message
- checkout
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/order-summary-07Dependencies installed automatically: lucide-react, motion.
Uses: button, checkbox, label, reveal, textarea, utils.
Usage
import OrderSummary07 from "@/components/blocks/order-summary-07"
export default function Page() {
return <OrderSummary07 />
}