shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show a digital collectible's edition, traits and history without the hype with this NFT product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three tiles, each ruled by Guides. A tile has a pattern drawn from a seed, a five-by-five grid of squares, triangles, quarter circles and diamonds in greys, mirrored across the middle, with a Badge for the rarity tier. Under it are the piece's name and edition ("Edition 1 of 1, series of 4,000"), three trait chips, the rarity in words ("Rare, about 1 in 1,929") and a "Trait shares" button that opens a Popover with each trait's share and piece count. A three-row history gives dates, and every piece costs the same fixed price. The outline Button, "Collect (demo)", turns into "Collected" with an Undo. There is no bid, no wallet and no chain. Nothing is minted or stored. On a phone the tiles are a row you swipe. For generative art, digital editions and any collection with traits.
FAQ
How is the rarity worked out?
From the traits' shares. Each trait has a share of the series in basis points (320 is 3.2%). The "1 in N" figure is 10,000 to the power of the trait count divided by the product of the shares, as if the traits were independent, and the tier is Common below 100, Uncommon below 1,000 and Rare above. It is an estimate stated as one in the popover, not a market price.
How are the patterns made?
patternOf(seed) draws five rows of three cells from a seeded generator and mirrors them across the middle, so the same seed always draws the same piece and the page uses no random numbers. Give a piece another seed and it draws another pattern; to show real artwork, swap Pattern for an img.
Why is every price the same?
Because rarity is shown as information, not as a reason to pay more. PRICE is one integer in cents for the whole series. Change it per piece if your series prices differently, and keep the tile's rarity line separate from the price.
What stays local, and how do I wire it for real?
Collecting is page state; nothing is minted, charged or sent anywhere. There is no wallet connection and no bidding in the block. In your app, call your checkout from collect and keep the status line for the result.
