Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Web3 blocks

Pro

Auction House Web3 Block for Solid

One auction with a large drawn token, a bid form, a derived reserve badge, a demo clock and an anti-sniping rule that moves the end 10 minutes later when a bid lands in the last 10.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Run one auction in depth, with this auction house panel for Solid with Ark UI. It's the room of Lotwright, a fictional auction house, for Moonwake Rings #77, an Orbit piece drawn from its number as concentric rings and one satellite. The side cell shows the current bid, a Badge that reads Reserve met only once a bid reaches 5.00 ETH, the time left, and a bid field whose minimum is the highest bid plus 5%. Because nothing here ticks, a Demo clock slider moves the time along from 14:20 to 15:05 UTC. The anti-sniping rule is arithmetic on that clock: a bid placed in the last 10 minutes moves the end 10 minutes later, and the status line says Auction extended to 14:42 UTC. The bid history below gains your bid at the top, and You are leading appears while it is the highest. Sample figures, not market data. For auction rooms, drops and any single item with a closing time.

FAQ

How does the anti-sniping rule work?

If a bid is placed when the auction has 10 minutes or less to run, the end moves 10 minutes later. The demo starts 12 minutes before the end, so a bid right away does not extend it; move the Demo clock a few minutes forward and then bid, and the end becomes 14:42 UTC. Once extended, a bid needs the clock to move on before it can extend the end again.

How is Reserve met decided?

The reserve is a typed 5.00 ETH. The badge is computed from the highest bid in the history, so it flips the moment a bid reaches the reserve, and it says the same thing in words for people who cannot see the icon.

What does Place bid check?

That the amount is at least the highest bid plus 5%, rounded up to a hundredth of an ETH, and that the auction has not ended at the demo clock. A refusal is written under the field in place. A good bid goes to the top of the history with the clock time, and the field moves to the next minimum.

What stays local, and how do I wire it?

All of it. Bids, times and the reserve are typed constants and component state, and the demo clock exists only because the page never reads a real one. In your app take the end time and bids from your auction contract, apply the extension on the server or in the contract, and show the real countdown.

Is it accessible from the keyboard?

Yes. The demo clock is a native range with a spoken value such as 14:23 UTC, 9m left, the bid field is labelled, a refusal is announced, and the history is a named scroll region you can focus. One polite status line says what each action did.

How does it look on a phone?

The token sits above the bid cell, which keeps the current bid first, then the reserve, the clock, the field and the button. The history scrolls inside its own region below.

All 100 web3 blocks