Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Collection Gallery Web3 Block for Vue

Twelve tokens of one NFT collection on shared hairlines, each with an owner chip, and a Holder select that outlines one wallet's tokens and lightens the rest.

UI library: Ark UI

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Answer who holds what in a collection, with this ownership gallery for Vue with Ark UI. It's Galleryfold, a collection browser, showing twelve of 4,000 tokens of Fennelcroft Sprouts, each drawn as a greyscale sprout sigil on a shared hairline cell, four across on desktop and two on a phone. Under every token an owner chip shows an initials Avatar, the short address and a Badge with the word Owner or Trader. A Holder Native Select lists five typed wallets with their token counts; choosing one outlines that wallet's tokens and lightens the rest, and the polite line reads the result, for example "Wallet 0x3B9e…71d0 holds 4 of 12". Pressing a token chooses its owner, and focusing or pointing at one previews the same outline without changing the select. This is an ownership view, not a trait filter. For collection pages, holder analytics and any gallery that asks whose token it is.

FAQ

How do I fill it with my collection?

Edit WALLETS and TOKENS. A wallet has an address (42 characters, 0x and 40 hex digits), initials and a role word; a token has a number and the id of its owner. The counts in the select and the outline are computed from the owners, so adding a token changes them with no other edit. Replace the sigil with the token's image and load the owners from your indexer.

What do pressing and focusing do?

Pressing a token sets the Holder select to that token's owner; pressing a token of the same owner again clears it. Pointing at a token or tabbing to it only previews its owner's tokens, so a keyboard user can move across the grid and see ownership without changing the choice, and the polite line speaks only the chosen holder.

What do Owner and Trader mean?

They are typed words on each wallet. Owner is a wallet that has held its tokens since they were first sold; Trader is one that has bought and sold. In your app derive them from transfer history, and keep the word beside the address, since the chip never relies on color.

What stays local?

All of it. Wallets are invented, the addresses are not real and nothing is read from a chain or a wallet. The block draws the sigils from token numbers, so there are no images to load and the layout never shifts when a holder is chosen.

Is it accessible?

Each token is a button named with its number, owner and role, and reports pressed or not. Outlined tokens are marked by a ring and the others by a lighter drawing, so the state never depends on color alone. The select is a labelled native control, and the status line is polite.

How does it look on a phone?

Two tokens across, with the owner chip wrapping under the number: the address stays in one piece and the role badge drops to its own line.

All 100 web3 blocks