shadcn.io is not affiliated with official shadcn/ui
Trait Explorer Collection Gallery Block for React
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.
Installation
Overview
A collection gallery for React with Base 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 the hover card may not open; tap a glyph and its traits pin in the band under the grid.
Related
- Pro
Paginated Minimal Grid Gallery
Hairline gridsA quiet grid of twenty-four drawn concrete-architecture plates, eight to a page on shared hairlines, with a title and year that appear on hover and focus and the catalog pagination in a band that ends the block.
- Pro
Inline Expansion Thumbnail Grid
Hairline gridsSixteen drawn thumbnails on shared hairlines, eight across, where choosing one opens a preview band straight under its row with the whole picture, its source, Previous, Next and Close, without changing the block's height.
- Pro
Ratio Switcher Gallery
Hairline gridsSix drawn pictures in cells of their own, with a Ratio control (1:1, 4:3, 16:9, 3:2, 9:16, 21:9) that crops every picture to it while keeping each subject in frame, and a chip on every picture naming the ratio.
- Pro
Variant Matrix Gallery
Design assetsA native table of drawn mugs by glaze and size, where hovering or focusing a cell lights its row and column heads and the cells between them, and choosing a cell writes its stock in a status line that keeps its height.
- Pro
Caption Density Gallery
Rows and bandsA photo essay of five framed pictures in alternating rows, with a Short and Full switch: Short shows each title, Full adds the place, date, credit and a two-sentence story.
- Pro
Hover Card EXIF Gallery
Hairline gridsSix drawn frames in cells of their own, each a link with a hover card of camera, lens, aperture, shutter speed and ISO that opens on hover and on keyboard focus, and prints the same settings in the caption on a touch screen.