shadcn.io is not affiliated with official shadcn/ui
Monochrome Card Lattice Features Block for Svelte
A three-by-three lattice of seven data-platform primitives on shared hairlines, each with a glyph, a sentence and a mono metric, plus two tinted summary cells that count the primitives and name the one API.
Installation
Overview
A feature lattice for Svelte with Ark UI. Under a centred header, nine cells share hairlines inside one rounded outline: seven are primitives of a data platform (tables, streams, queries, lineage, access, snapshots, alerts), each with a small glyph tile, a title, a sentence and one line of its own in mono type; two are summary cells in the muted tint, one counting the primitives and one naming the single API they share. The summaries sit in the third and seventh places, so the tint runs along a diagonal rather than a row. On a phone the lattice is two cells across and the first summary takes a row of its own. It's built from Guides for the page spine, plain CSS grid for the lattice and your theme's tokens for every colour, so it is greyscale and follows light and dark. For platforms and toolkits whose pitch is a small set of parts that fit together.
FAQ
How do I change the primitives?
Edit PRIMITIVES at the top of the file: each entry has an icon, a name, a sentence and a metric line. The first summary's figure is PRIMITIVES.length, so it follows the array. The cells are placed by index in the JSX, with the two summaries between them: to add an eighth primitive, add it to the array and place another Cell where you want it, and keep an even number of cells in the two-across phone layout.
Why are the summary cells tinted?
They aren't features, so they read differently: a bg-muted fill, a large figure and a sentence in place of a glyph. The tint is a solid fill, so the hairlines stay crisp. Their sentence uses text-foreground/70 rather than the muted text colour, because muted text on the muted tint falls just short of AA contrast.
What are the mono lines at the foot of each cell?
A short fact in the product's own vocabulary ("lag p99: under 2 s", "restore: under 90 s"), set in the mono font inside a bordered chip. They carry dir="ltr" so a right-to-left page keeps them in reading order. They are copy, not live data: replace them with figures you can stand behind.
Does it follow my theme?
Yes. Every colour is a token (background, card, muted, border, foreground), there is no dark scope, and nothing is a fixed colour, so the lattice is light on a light page and dark on a dark one in any preset. The one outer radius comes from the grid's rounded-2xl and overflow-hidden; the cells inside have no radius.
How does the lattice lay out on a phone?
Below lg it is two cells across, with the first summary spanning both columns so every row is full: the order of the cells in the file keeps a summary beside a primitive on the other rows. Cell padding steps down from p-6 to p-4, and nothing scrolls sideways at 320 pixels.