shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show a markdown the way your shoppers read it with this sale product card for React with React Aria. A hairline frame with a plus mark on each corner holds three tiles, each marked at its own corners by Guides. A tile has a drawn greyscale picture, the name and a fact, the sale price and the saving, the end date with the days to go, and an outline Button that says "Add to bag". A Toggle Group at the end of the header, "Show savings as", changes the saving on every tile at once: a Badge with "-25%", a Badge with "Save $18", or the old price struck through beside the sale price. Each tile has one typed pair of prices, and the percent is rounded once from the cents. Add turns into "Added" with an Undo, the heading row's "Bag" count follows and a polite status line says what changed. Nothing is stored or bought. On a phone the tiles are a row you swipe, with the next one showing. For sale pages, promotions and any shop that wants to test its wording.
FAQ
How do I change the prices?
Edit LINENS. Each piece has a wasCents and a nowCents, so $72 is 7200. The percent, the amount saved and the struck-through price are all worked out from those two numbers, which means they always agree. Whole dollars are shown without cents.
Why does one tile say -21% when the saving is $10 on $48?
The percent is rounded once to a whole number, from the cents: $10 off $48 is 20.8%, which reads 21%. Nothing is rounded twice, and the amount and the old price are exact.
Is there a countdown?
No clock runs. The end is a typed date (ENDS) and the days to go are counted from a fixed "today" (AS_OF), so the page is the same on every load. In a real shop count from the visitor's date, on the server, and say "Ends 20 Oct" in the shop's time zone.
What stays local, and how do I wire it for real?
The wording choice and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. The pictures are typed shapes: swap Picture for an img of each product.
