Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

NFT Auction Marketplace Web3 Block for Svelte

Four open auctions sorted by the soonest end, filtered All, Ending today or My bids, each with a bid form that makes you the highest bidder and a rival who can outbid you.

UI library: Ark UI

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

Follow several auctions at once and bid on one, with this NFT auction marketplace panel for Svelte with Ark UI. It's the auction board of Hammerfold, a fictional auction marketplace: four live auctions, each token drawn in the family of its own made-up collection, with the current bid, the number of bids, and an Ends in time worked out from a typed end instant against one fixed date, so nothing ticks. A Toggle Group switches between All, Ending today and My bids, each with a count. Bid opens a Popover whose minimum is the current bid plus 5%; Place bid makes you the highest bidder and moves the card under My bids. On the third card a typed rival answers your first bid with one 5% higher, so You were outbid and Bid again are both reachable. Sample figures, not market data. For auction marketplaces, drops and any board of items with an end time.

FAQ

How are the auctions ordered?

By the soonest end, always. Each auction has a typed end instant, and the list is sorted on it, so the one ending in 44 minutes comes before the one ending in three days. The view group only hides cards; the order never changes, and hidden cards stay in the grid as blank cells so the panel keeps its height.

Where does Ends in come from?

It is arithmetic: the typed end minus one fixed date, written as minutes, hours and minutes, or days and hours. Nothing reads the clock, so the figures are the same on every load and every server. Ending today means the end falls on the same calendar day as that fixed date, in UTC.

What does Place bid do?

It checks that your amount is at least the current bid plus 5%, rounded up to a hundredth of an ETH. If it is, the bid count goes up, you lead, and the status line says so; if not, the form names the minimum. The rival on the third card bids once, 5% above yours, and then stops, so the card shows You were outbid and Bid again.

What stays local, and how do I wire it?

Everything. Bids, rivals and times are typed constants and component state; nothing is sent to a chain or a wallet. In your app load auctions and bids from your indexer, show a countdown from the contract's end time, and make Place bid a signed transaction with the wallet prompt your users expect.

Is it accessible from the keyboard?

Yes. The view group is a set of pressed buttons, each Bid button opens a form with a labelled amount field and returns focus when it closes, and the leader line states who leads in words. One polite status line says what each bid did.

How does it look on a phone?

The cards run one across, soonest end first, each keeping the token and name above a three-figure row for the bid, the bid count and the time left. The bid form opens as a popover under its button.

All 100 web3 blocks