shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show where a bidder stands with this auction product card for React with React Aria. Three lots sit between shared hairlines, each with a drawn picture, its lot number, the current bid, the bid count and the end date with the days left, counted from a fixed day. A status line says "You lead", "Outbid by $50" or "Watching", and a bell Toggle watches the lot. Under it are a bid Input, "+$50" and "+$100" chips that fill it and an outline "Bid" button. A bid has to be the current bid plus the step; a lower one is refused in a line under the field that says what the minimum is. A placed bid raises the current bid, adds one to the count and flips the lot to "You lead". On a phone the lots are a row you swipe. For estate sales and any shop with several live lots.
FAQ
How do I change the bid step?
Edit step on each lot, in cents. The minimum bid is the current bid plus the step, and the chips are one step and two steps.
Why is nobody outbidding me?
There is no other bidder in the demo: the "Outbid by $50" lot is typed that way at the start. Your bid on it flips it to "You lead". In a real sale the status comes from your auction server.
Is there a countdown?
No. Each end 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.
What stays local, and how do I wire it for real?
Bids and watches are page state; nothing is placed, charged or stored. Replace the body of bid with a call to your auction service and show its refusal in the field. The pictures are typed shapes: swap Picture for an img.
