shadcn.io is not affiliated with official shadcn/ui
NFT Gallery Web3 Block for Radix UI
A collector's wallet view: six tokens from three invented collections as a grid or a list, sorted by rank, floor or name, with details on hover, focus and press and a foot that totals the selection's floor value.
Installation
Overview
See what a wallet holds and what a handful of tokens are worth, with this NFT gallery for React with Radix UI. It's the wallet view of Shelfspace, a collector's app, with six tokens from three invented collections, each drawn in its own greyscale sigil family. A Segment Group switches between a grid and a list, a Native Select sorts by rarity rank, floor or name, and a Toggle called Show details turns the rank and floor on for every token. Without it the details appear on hover, on keyboard focus and when you press the token, so touch and keyboard users see them too. A Checkbox on each token builds the foot line, for example "Selected: 3 tokens, floor value 3.42 ETH", summed from the typed floors. There is no transfer here. For collector apps, wallet pages and portfolio screens.
FAQ
How do I fill it with my tokens?
Edit COLLECTIONS and TOKENS. A token has a name, its collection, the rank in that collection and the floor in hundredths of an ETH (84 is 0.84 ETH), so the sum is exact. The sort and the selected total are computed from those fields. Replace the sigil with the token's image and the floor with your market data.
When are the details shown?
On hover, on keyboard focus anywhere in the tile and when you press the token's picture, which pins them. The Show details toggle shows them on every tile at once. They reserve their space, so showing or hiding never moves the grid. In the list the details are always shown and the toggle is off. For screen readers the picture button's name already says the rank and floor.
How is the selected total worked out?
It adds the floors of the ticked tokens in hundredths and prints them as ETH with two decimals, so three small floors never drift by rounding. The line is the block's one polite status message; sorting and layout changes are added to it for screen readers only.