shadcn.io is not affiliated with official shadcn/ui
Floor Price Web3 Block for Radix UI
A sortable table of eight NFT collections with floor, 24 hour change, a seven point sparkline, volume and share listed, plus a floor-depth band for the collection you press.
Installation
Overview
Compare collection floors and see how deep one goes, with this floor price panel for React with Radix UI. It's the board of Floorwatch, a fictional floor tracker. A native table lists eight made-up collections, each with a tiny token of its own family, the floor in ETH, the 24 hour change as a sign, an arrow and a word, a seven point sparkline, the 24 hour volume and the share listed. The headers are buttons that sort the table and report the order in aria-sort. Pressing a collection opens its floor depth in the band below: the six cheapest listings with the gap over the one before, a sentence such as The next listing is 8% above the floor, and the cost of sweeping all six. The floor is the cheapest listing and the change is measured from the day before, so both are derived from the typed rows. Sample figures, not market data. For floor trackers, market pages and collection dashboards.
FAQ
What is typed and what is worked out?
Each collection types its six cheapest listings, its floor on the six days before, its volume and its share listed. The floor is the lowest listing, the 24 hour change is the floor against the day before, the sparkline is those seven values, and the gap and sweep cost come from the six listings. Nothing is typed twice.
How does sorting work?
Each sortable header toggles its column: names start A to Z, numbers start high to low, and pressing again reverses. The header that rules carries aria-sort, and the status line says the order in words. The sparkline is not a sort column.
What is floor depth?
The six cheapest listings of a collection in order, each with its gap over the one before as a percent, a bar against the dearest of the six, and two sentences: how far the next listing sits above the floor, and what it would cost to buy all six. It describes listings, not a recommendation.
What stays local, and how do I wire it?
All of it. The listings, volumes and daily floors are typed constants. In your app take listings from your marketplace index, store a daily floor per collection for the sparkline and the change, and keep the sweep cost to the listings you can actually fill.
Is it accessible from the keyboard?
Yes. The table has a caption, column and row headers, the sort headers and the collection names are buttons, and the scroll region is named and focusable. A collection button carries its floor and seven day trend in a hidden sentence, so the sparkline is never the only source.