React Order Summary
The cart the catalog cards feed into. Each line carries a mono manufacturer part number, its packaging form (Cut Tape / Reel / Tube / Tray) and lead time, and a quantity stepper that enforces the two rules every component distributor lives by: a minimum order quantity and a pack multiple — steppers jump by the multiple and clamp at the MOQ, and typed values snap to the nearest legal quantity. Extended price is unit × qty, and the totals block rolls up subtotal, shipping, estimated tax, and total, all in tabular mono so the columns line up. Try the − / + steppers and the remove buttons — the demo holds real state.
Order summary
3 lines · 295 pcs- XC7A100T-2FGG484IAMD Xilinx
Artix-7 FPGA, 101k logic cells, FGG484
TrayIn stock$168.40 ea$842.00 - STM32H743ZIT6ST
Cortex-M7 MCU, 2 MB flash, 1 MB RAM, LQFP144
TrayShips in 2 wks×10 multiple$11.82 ea$472.80 - TPS62933DRLRTI
3.8–30 V, 3 A step-down converter, SOT-583
Cut TapeIn stock×50 multiple$0.612 ea$153.00
- Subtotal
- $1,467.80
- Shipping
- Free
- Est. tax (8.25%)
- $121.09
- Total
- $1,588.89USD
Volume pricing applied at the line level. Duties calculated at checkout.
Installation
Usage
The component is presentational — you own the lines array and update it from onQuantityChange / onRemove. Quantities are normalized against moq and packMultiple before they reach your handler, so whatever you store is always a legal order.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | OrderLine[] | — | { mpn, description, manufacturer?, packaging?, lead?, unitPrice, quantity, moq?, packMultiple? } |
| currency | string | "USD" | ISO currency for Intl.NumberFormat |
| shipping | number | 0 | Flat shipping; 0 renders "Free" |
| taxRate | number | 0 | Fraction, e.g. 0.0825; row hidden when 0 |
| onQuantityChange | (mpn, quantity) => void | — | Fires with the snapped, clamped quantity |
| onRemove | — | — | Omit to hide the remove button |
| — | — | — | Action slot below the totals |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.