shadcn.io is not affiliated with official shadcn/ui
Trading Card Collection Features Block for Ark UI
A static row of four spec cards for a component library: a drawing, a type line, a rule sentence, a spec link and a stat tab with two numbers, raised on hover or focus.
Installation
Overview
A spec-card feature section for React with Ark UI. A compact header says "Every component, with its numbers on the card" and carries the Shine Button. Under it, four equal cards sit in one row, each in a cell with overshoot lines: the component's name and a mono serial ("03 / 04"), a type line, a greyscale drawing of the component, one sentence about what it guarantees, a link to its spec and a stat tab with the share of its tests that pass and its first render time. The cards do not overlap or fan out; hovering or moving focus into a card raises it a few pixels. Four across from lg, two from sm, and a snap scroller on a phone. It's built from Guides and Shine Button, with CSS transitions and your theme's tokens for every colour. For component libraries, SDKs and any catalogue of parts with numbers worth printing.
FAQ
How do I change the cards?
Edit SPECS at the top of the file: each entry has a name, a serial, a type line, a rule sentence, the two stat values and an art that picks one of four drawings (ArtGrid, ArtCommand, ArtDates, ArtChart). Replace a drawing with a screenshot or your own component.
What raises a card?
Hovering it, or moving focus onto its spec link. Both lift it a few pixels and deepen its shadow with a short transition; reduced motion turns the lift off. Nothing is clipped, because each card has room inside its cell.
How does the row work on a phone?
Below sm the row is a horizontal snap scroller named "Component specs", with each card about 82 percent wide so the next one peeks in. Its links are focusable, so a keyboard user can scroll it with Tab, and the overshoot lines are hidden there.