shadcn.io is not affiliated with official shadcn/ui
NFT Marketplace Web3 Block for Radix UI
A marketplace listing grid: a two-thumb Price slider, a sort menu and trait chips narrow nine drawn pieces, and each card opens an offer form that notes your offer locally.
Installation
Overview
Browse what is for sale and make an offer without leaving the grid, with this NFT marketplace panel for React with Radix UI. It's the listing page of Stallhouse, a fictional marketplace, showing nine pieces of Quillgrid, a made-up collection drawn from seeds in greys, with typed prices and ranks that are samples, not market data. A toolbar band holds a two-thumb Slider for the price between 0.1 and 12 ETH, a Native Select to sort by recently listed, price or rarity rank, and three Toggle Group chips that keep only the listings holding every picked trait. Each card shows its token, rank, price in ETH with a sample dollar figure and a Make offer button that opens a Popover with an amount field and one Send offer button. A range that matches nothing shows the Empty state with a Clear button, and the grid keeps its height while it filters. For NFT marketplaces, collection pages and any storefront that lists unique items.
FAQ
How do the price range, sort and traits combine?
A listing shows when its price sits between the two thumbs and it holds every picked trait. The sort then orders the matches: recently listed, price low to high, price high to low or rarity rank. Listings that do not match stay in the grid as blank cells, so the panel never changes height, and the status line says how many of the nine are showing.
What does Send offer do?
It checks the amount, which must be a number of at least 0.05 ETH and below the listed price, then closes the form, writes your offer on the card ("Your offer: 1.10 ETH") and says so in the status line. A bad amount keeps the form open and names the problem in place. Nothing is bought, listed or sent anywhere.
Where do the pictures come from?
Each token is a small SVG drawn from its number: a three by three grid where some cells are filled and some bare, in greys mixed from the theme, with one mark. There are no photographs, so the art follows the light and dark themes, and the name sits beside it in text.
What stays local, and how do I wire it?
All of it. The listings, ranks, prices and the dollar rate are typed constants, and an offer only changes this component's state. In your app load listings from your indexer, take the rate from your price source, and make Send offer create a signed order through your marketplace contract, with the wallet prompt your users expect.
Is it accessible from the keyboard?
Yes. Each slider thumb is a named control that moves with the arrow keys, the sort is a native select, the trait chips are pressed buttons, and Make offer opens a form that returns focus to the button when it closes. One polite status message carries the count and the result of an offer.