Deals 4 - Bundle dealsPro
A bundle builder showing products joined by plus signs, each toggleable with a checkbox, and a summary card that recalculates the bundle price, original total and savings when all items are included. Use it for frequently-bought-together offers and kit discounts.
About Deals 4
A bundle builder showing products joined by plus signs, each toggleable with a checkbox, and a summary card that recalculates the bundle price, original total and savings when all items are included. Use it for frequently-bought-together offers and kit discounts.
Deals 4 is a pro deals block for React, built on shadcn/ui and Tailwind CSS. 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.
- deals
- bundle
- frequently bought together
- checkbox
- savings
- kit
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/deals-04Dependencies installed automatically: lucide-react.
Uses: badge, button, checkbox, reveal, utils.
Usage
import Deals04 from "@/components/blocks/deals-04"
export default function Page() {
return <Deals04 />
}