shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show trade pricing on a single product with this wholesale product card for React with Radix UI. A hairline frame holds a drawn greyscale stack of mailers with stock in words and, in a side cell with its own divider, a quantity box with one-case steppers, a small price table and the total. Type a quantity of 24 or more and the table marks the row it falls in: 24 to 95 at $0.62, 96 to 287 at $0.55, 288 and up at $0.48. A line under the box says what a typed number rounds to, or how many more mailers cut the unit price and by how much. The single Shine Button "Add to order" turns into "Added" with an Undo. Guides rule the bands. For packaging, supplies and other goods sold by tier.
FAQ
Where do the tiers come from?
From the typed TIERS array: a start quantity and a unit price in cents. The active row, the unit price, the total and the "add N more" line are all derived from it, so editing a tier changes all four.
What happens to a quantity that is not a whole case?
It rounds up to the next case of 6, is held between 24 and 3,000, and the line under the box says so ("Sold in cases of 6, so 20 rounds to 24"). The box settles to that number when it loses focus or on Enter.
Why a text box instead of a number input?
The tier must follow every keystroke. A plain numeric text box with its own parsing does that the same on every base, and the steppers move by one case.
What stays local, and how do I wire it for real?
The quantity, the order and the status line are page state; the ship date is typed. Nothing is stored, charged or sent. Replace add and undo with calls to your order API and price the order on the server from the same tiers.
