Line items with quantity steppers, subtotal, discount, tax and total. Amounts roll when they change and the list folds on narrow containers.
npx shadcn@latest add https://hyperblur.dev/r/pay-order-summary.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-order-summary.tsx.
import { PayOrderSummary } from "@/components/hyperblur/pay-order-summary"
<PayOrderSummary discount={450} discountLabel="Code SAVE10" shipping={0} defaultOpen />| Prop | Type | Default | Description |
|---|---|---|---|
| items | PayOrderItem[] | three sample items | Line items. Each has id, name, price in minor units (cents) and optional detail, quantity and swatch color. |
| quantities | Record<string, number> | Controlled quantities keyed by item id. Pair with onQuantityChange. | |
| onQuantityChange | (id: string, quantity: number) => void | Called when a stepper changes a quantity. Quantities stay between 1 and 99. | |
| currency | string | "$" | Currency symbol put in front of every amount. |
| discount | number | 0 | Discount in minor units, capped at the subtotal. The row is hidden at zero. |
| discountLabel | string | "Discount" | Label of the discount row. |
| taxRate | number | 0.08 | Tax rate as a fraction of the discounted subtotal. Use 0 to hide the row. |
| shipping | number | Shipping in minor units. Shows Free at zero and hides the row when omitted. | |
| title | string | "Order summary" | Header text. |
| defaultOpen | boolean | false | Whether the item list starts open on narrow containers. It is always open when wide. |
| accent | string | "#2f7bff" | Focus ring color. |