shadcn.io is not affiliated with official shadcn/ui
Collection Stats Web3 Block for Radix UI
Floor, volume, holders and listed share with a 24 h, 7 d or 30 d change, a ten-bucket listing-price histogram that marks the floor, and a top-10 holder bar with an expandable wallet list.
Installation
Overview
Read one collection at a glance, with this collection stats panel for React with Radix UI. It's the analytics page of Statshelf, a fictional stats site, for Moonwake Rings, a made-up collection of 10,000 pieces. A Toggle Group at the header's end picks 24 h, 7 d or 30 d, and the change on four figures follows it: the floor, the volume in the window, the holders and the share listed, each with an arrow, a sign and a word. Below sits a bar chart of the ten listing-price buckets, each 0.50 ETH wide, with the bucket that holds the floor drawn solid and a hidden table that says every count. A bar then shows how much of the supply the ten biggest wallets hold, and a Collapsible opens the list of those ten, as short addresses with their tokens and share. The floor bucket and the listed share are worked out from the typed buckets. Sample figures, not market data. For analytics pages and collection dashboards.
FAQ
What is worked out and what is typed?
The buckets, the supply, the holder list and the changes per window are typed. The listed count is the sum of the buckets, the listed share is that over the supply, the floor bucket comes from the floor and the bucket width, and the top-10 share is the sum of the ten holdings over the supply, each rounded to a tenth of a percent.
What does the period group change?
Only the changes and the window's volume. The floor, holders and listed share stay as they are now; the group changes what they are compared with, and the status line reads the whole picture in a sentence each time you press it.
How is the chart read without seeing it?
The drawing is hidden from assistive technology, and a table with the price range and the listing count of each bucket sits inside the figure. The caption says which bar holds the floor, and the bars are not the only place any number appears.
What stays local, and how do I wire it?
All of it. Nothing reads a chain or an index: every count, price and address is a typed sample, and the addresses are invented. In your app compute the buckets from open listings, count holders from transfer events, and keep the changes per window in your analytics store.