Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Trait Explorer Collection Gallery Block for Svelte

A generative print edition of 24 glyphs built from four layers, four Selects that filter by trait, and a hover card with how rare each layer is.

Framework
UI library

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

A collection gallery for Svelte with Ark UI. Twenty-four glyphs on shared hairlines, six across, are each built from four layers drawn in the theme's greys: a ground, a shape, a mark and a frame. A band of four Selects (ground, shape, mark, frame) keeps the glyphs that match and turns the rest into quiet squares, so the grid never moves, with a live "9 of 24 match" count and a Clear button. Pointing at or focusing a glyph opens a hover card with its traits and how rare each is in the edition ("Frame: Hairline, 3 of 24, 13%"); choosing a glyph pins the same facts in a band under the grid, which also covers touch screens. The rarity is counted from the 24 glyphs, so there is no price, no wallet and no token. It's built from Guides, Select, Hover Card and Button, with CSS transitions for the entrance. For print editions, generative art, trading cards and any set with traits.

FAQ

How is a glyph built?

Each glyph is an SVG at module scope: a rectangle for the ground, then a path for the shape, one for the mark and one or two for the frame. A ground carries the tones that read on it, so a dark ground gets a light shape, and the colours are mixes of the theme's foreground, never a hue. With real art, swap GlyphArt for an image per glyph.

How is rarity worked out?

The edition is typed once: GLYPHS is generated from a fixed seed and each trait's weight, and the first four glyphs carry one of every trait so none is missing. "3 of 24, 13%" is a count over those 24, so changing the seed changes the numbers with it.

What happens to glyphs that do not match?

They stay in the grid as empty squares and stop taking focus, so nothing moves while you filter. A polite line says how many match, and Clear sets all four Selects back to Any.

Does the hover card work without a mouse?

It opens on focus as well as on hover, and each glyph's button is named with all four traits. On a touch screen a tap opens the card and pins the glyph in the band under the grid.

Which keys work?

Tab moves through the Selects and the glyphs that match; each Select opens with Enter, Space or the down arrow and picks with Enter. A glyph is a button: Enter or Space pins it, and the same again unpins it.

How does it fit on a phone?

The Selects go two across, the glyphs three across and the readout band stays under them with room for its four rows, so choosing a glyph never moves the page.

All 100 gallery blocks