Shopping Cart with Summary

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce14.tsx instead.

Usage

The file also exports ecommerce14Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Ecommerce14, ecommerce14Demo } from "@/components/blocks/ecommerce/ecommerce14";

export default function Page() {
  return <Ecommerce14 {...ecommerce14Demo} />;
}

Props

Types

interface CartLineItem {
  id: string;
  name: string;
  variant?: string;
  unitPrice: number; // cents
  quantity: number;
  image?: { src: string; alt: string };
}

Behavior notes

• The cart is real client state: the quantity +/- buttons genuinely increment and decrement that line's quantity (clamped between 1 and 9, so decrementing to 0 is not possible from the stepper, only Remove drops a line entirely), and Remove genuinely deletes the item from the local cart array.
• The subtotal, shipping, tax, and total in the order summary are all recomputed live from the current cart state on every change, not just on mount: subtotal sums quantity times unit price across all lines, shipping is 0 once the subtotal reaches freeShippingThreshold and otherwise equals shippingCost, tax is the subtotal times taxRate rounded to the nearest cent, and total is the sum of all three.
• The demo cart starts at $72.00, three dollars under the $75.00 free-shipping threshold, so incrementing any single item's quantity by one is enough to flip the shipping line from $8.00 to Free live.
• Removing every item swaps the list for an empty-cart placeholder message and disables the Checkout button; the Checkout button itself is decorative and has no submit handler even with items in the cart.
• Money is stored and summed as integer cents throughout and only formatted to a dollar string at render time, so repeated quantity changes never accumulate floating-point rounding error.