A cart panel with line items, quantity steppers and remove, a free shipping progress bar, a promo code field with valid and invalid states and totals that count to their new value.
Add $22.00 more for free shipping.
npx shadcn@latest add https://hyperblur.dev/r/shop-cart-summary.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shop-cart-summary.tsx.
import { ShopCartSummary } from "@/components/hyperblur/shop-cart-summary"
<ShopCartSummary freeShippingThreshold={150} onCheckout={(t) => console.log(t.total)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Your bag" | Panel heading. The item count is appended. |
| defaultItems | { id: string; name: string; variant?: string; price: number; quantity: number; tone?: string; glyph?: "shoe" | "sock" | "bag" | "bottle" | "cap" }[] | 3 sample items | Initial cart lines. `tone` colors the thumbnail and `glyph` picks its icon. |
| currency | string | "$" | Currency symbol placed before amounts. |
| freeShippingThreshold | number | 300 | Order value after discounts that unlocks free shipping. |
| shippingCost | number | 9 | Shipping charged below the threshold. |
| taxRate | number | 0.0825 | Tax rate applied to the discounted subtotal. |
| promoCodes | Record<string, number> | { NORTHWIND10: 0.1, TRAIL15: 0.15 } | Accepted codes mapped to a discount fraction. Matching ignores case. |
| checkoutLabel | string | "Checkout securely" | Checkout button label. |
| continueHref | string | "#" | Target of the Continue shopping links. |
| onItemsChange | (items: CartItem[]) => void | Called after a quantity change or removal with the new lines. | |
| onCheckout | (totals: { items; subtotal; discount; shipping; tax; total; promoCode }) => void | Called when the checkout button is pressed. | |
| accent | string | "#10b981" | Accent for the progress bar, promo chip and checkout button. |