Shopping Cart 10 - Cart with recommended productsPro

A cart list with a "Complete the look" rail of recommended products below, where each recommendation can be added straight into the cart with live subtotal updates. Use it to lift average order value with cross-sells on the cart page.

About Shopping Cart 10

A cart list with a "Complete the look" rail of recommended products below, where each recommendation can be added straight into the cart with live subtotal updates. Use it to lift average order value with cross-sells on the cart page.

Shopping Cart 10 is a pro shopping cart block for React, built on shadcn/ui and Tailwind CSS. It ships as 111 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
  • cart
  • recommendations
  • cross-sell
  • upsell
  • products

Installation

  1. Add the Chocolate UI registry to your components.json (see the installation guide).
  2. Run the shadcn CLI:
npx shadcn@latest add @chocolate/shopping-cart-10

Dependencies installed automatically: lucide-react.

Uses: button, reveal, utils.

Usage

import ShoppingCart10 from "@/components/blocks/shopping-cart-10"

export default function Page() {
  return <ShoppingCart10 />
}

FAQ