shadcn.io is not affiliated with official shadcn/ui
Auction Storefront Block for React
A watch lot with a typed bid ladder: the current bid, the minimum next bid, a bid field that refuses a low bid with the reason, the last five bids, a simulated outbid and Buy now.
Installation
Overview
Sell a single lot to the highest bidder, with this auction panel for React with Base UI. A header names the lot at Quarter Day, a vintage watch auction house. In a hairline frame with a plus mark on each corner, the first cell holds a drawn watch with its facts and a bid ladder, a typed table of minimum steps that grows with the price and marks the bracket the current bid is in. The side cell gives the closing time and the days to go as of a fixed date (no clock runs), the current bid, the minimum next bid, a bid Field with three quick amounts and the last five bids with their bidders' initials. A bid below the minimum is refused with the reason, in words under the field; a good bid heads the history and the foot says you lead. Simulate an outbid adds a scripted rival bid and says it is a simulation, and Buy now closes the lot in the page. The one Shine Button is Place bid, pinned to the bottom of a phone. It's built from Field, Input, Button, Badge, Shine Button and Guides, with a CSS entrance only. For an auction page, a collectors' sale or a charity lot.
FAQ
How do I change the lot and the ladder?
Edit SEED (the bids as they stand, newest first, each with its amount in cents), EARLIER (the bids not shown), LADDER (each bracket's upper limit and minimum step in cents), BUY_NOW, CLOSES and AS_OF. The minimum next bid is always the current bid plus the step of the bracket the current bid is in, worked out in whole cents.
Why is there no countdown?
Because a clock that ticks in a demo is a claim about a real sale. The block shows the closing time as a fixed phrase and the days to go from a fixed date. To run it live, compute the time left on your server, send it with the page and tick it in an effect with a visible pause control, which WCAG 2.2.2 asks for any moving countdown.
What happens when I place a bid?
The amount is checked as whole dollars, against the minimum and against Buy now. A refused bid says why under the field and moves focus back to it. An accepted one is added to the top of the history, the oldest of the five shown drops off, the current bid and the minimum next bid change, and the status line says you lead. Nothing is placed anywhere: send the bid to your auction service, and let it answer with the real current bid, because another bidder can always have outbid you.
What does Simulate an outbid do?
It adds a bid from a scripted bidder at the minimum next amount, so you can see how the lead changes hands. The status line says it is simulated and that no one else is bidding. Remove the button when the page is wired to real bidders.