shadcn.io is not affiliated with official shadcn/ui
Auction Bidding Chat Block for Radix UI
The auctioneer's call in a thread: bids from numbered paddles, a lot band with the current bid derived from the list, two chips for the next valid bids, and a Going once, Going twice, Sold chain with a pause button.
Installation
Overview
Run a live sale in a conversation, with this auction bidding chat for React with Radix UI. A framed window of fixed height holds the sale room of Gavelton, an online auction house: a band above the log shows a small drawn enamel clock, "Lot 12" and the current bid, which is derived from the last bid message, with the $25 raise. The thread is the bids, each a message from a numbered paddle, and the auctioneer's lines. Two outline Button chips place the next two valid bids ("Bid $325", "Bid $350"), or type a number; a bid under the minimum is refused in words. After your bid the auctioneer calls "Going once", "Going twice" and "Sold", 1.2 seconds apart, unless a scripted rival raises first, which resets the call; "Pause the call" holds the chain. It's the starting point for a live-sale room, a bidding thread or any turn-taking exchange.
FAQ
What stays in the page, and how do I make it real?
Everything, and no money moves: the paddles, the lot and the rival are typed, and the call is a timer chain in this file. To wire it for real, send each bid to your auction service where bidAt runs and append its bids and the auctioneer's calls to the same list; the lot band and the chips already read the list.
How are amounts handled?
In integer cents, everywhere: the raise is 2500, the minimum next bid is the current bid plus the raise, and a price is formatted from cents by one helper. A typed number is read as whole dollars and turned into cents, so no floating-point sum is ever shown.
How does the call work, and can I stop it?
Your bid starts a chain of calls, one step every 1.2 seconds, each a system line. After "Going once" a scripted rival raises once, which resets the chain; any new bid also resets it. "Pause the call" holds the timer and the same button resumes it. With reduced motion set, the whole chain lands at once. "Sold" closes the lot and disables the chips.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so each bid and each call is read out once. Prices are marked left to right so they read correctly in right-to-left languages, the clock is decorative and hidden, and the current bid is in text in the band.