shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Sell a product in price steps with this flash sale product card for React with Radix UI. A drawn speaker sits at the start, with a Badge saying "Flash sale". Beside it are the current price, the regular price struck through with the saving, and a bar in three tiers: the first 40 units at $89, the next 40 at $109 and the last 40 at $129. The current tier is marked, and a line says what comes next, "Next price $109 after 6 more". The one Shine Button, "Claim one", adds a unit: the bar, the tier and the price follow, "Yours" totals what you have claimed at the prices you got, and "Undo last claim" takes the last one back. The end is a typed date with the days left counted from a fixed day, so no clock runs. For launches and limited batches that reward the first buyers.
FAQ
How do I change the tiers?
Edit FIRST, NEXT and LAST. Each has a price in cents and the claimed count at which it ends (to). The bar, the current tier and the next-price line are worked out from those and the claimed count.
Do earlier claims keep their price?
Yes. Each claim records the price of the tier it was made in, and "Yours" adds those up. Undo removes the most recent one.
Is there a countdown?
No. The end (ENDS) is a typed date and the days left are counted from a fixed "today" (AS_OF), so the page reads the same on every load. In a real shop count from the visitor's date, on the server.
What stays local, and how do I wire it for real?
Claims are page state: nothing is reserved, charged or stored, and the 34 units already claimed are typed. Call your inventory in claim and read the claimed count from it. The picture is typed shapes: swap Picture for an img.
