Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Sheet Checkout Summary

ProNew

A cart side sheet where plus and minus buttons name the product, a line disappears at zero, the subtotal is announced and Checkout is disabled when empty.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

currency, locale

Guide and examples

When to use it

Use this for a mini cart that opens from the header after adding something, so the shopper never leaves the product page.

Do not use it as the full cart page: shipping, coupons and totals need more room. Stock limits belong in onQuantityChange.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

SheetCheckoutSummary

Prop	Type	Default	Description
`lines`	`{ id, name, unitPrice, quantity }[]`	-	Cart lines; `unitPrice` is in cents.
`onQuantityChange`	`(id: string, quantity: number) => void`	-	Called with the new quantity; remove the line at 0 or less.
`onCheckout`	`() => void`	-	Checkout pressed.
`currency, locale`	`string`	`USD, en-US`	Formatting.

Accessibility

Quantity buttons say what they change ("Add one Canvas tote"); the icons are decorative.
The subtotal is a polite status, so a screen reader hears the new total after each change.
Prices are formatted with Intl.NumberFormat for the given currency and locale.

Keyboard

Key	Action
Tab	through the quantity buttons
Enter or Space	changes the quantity
Escape	closes

Testing

The pattern ships a Testing Library test (sheet-checkout-summary.test.tsx) that covers count and totals, named quantity buttons, removing at zero, the empty state and Checkout.