Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Trading Card Collection Features Block for React

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.

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 spec-card feature section for React with Base 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.

Does it work right-to-left?

Yes. The cells, the type lines and the stat tab follow the page's direction, the arrow on each link mirrors, the serial and the numbers sit in bidirectional isolates, and the chart drawing keeps its own left-to-right order.

  • Pro

    Fanned Card Deck Features

    Carousels and media

    Five playbook cards stacked and pivoting from their bottom edge that spread on an arc on hover, on focus inside the deck or when a Fan out toggle is pressed, each with a small drawing of its play.

  • Pro

    Index Card File Rolodex Features

    Carousels and media

    A wallet-style stack of five studio contact cards built on a single-open Accordion: the cards overlap so only each title strip shows, and opening one slides it forward and reveals its details.

  • Pro

    Lab Report Specimen Cards Features

    Documents and objects

    Four specimen cards in a two by two of framed cells: each with a mono code, a verdict badge, a small drawing plate of its measurements and a data list of three readings.

  • Pro

    Aspect Ratio Mockup Cards Features

    Card grids

    A six-cell report-type grid for a reporting tool: a trend line, a table, a funnel, a ranked list, a heat strip and a donut, each drawn on a 4:3 plate above its title and one sentence.

  • Pro

    Browser Chrome Card Grid Features

    Card grids

    Six starter pages for a site builder, each card a browser window with three dots and an address pill over a greyscale skeleton of a pricing page, blog, checkout, docs, dashboard or 404.

  • Pro

    Framed Preview Card Trio Features

    Card grids

    Three tall cells, each opening with a framed greyscale drawing: a photo contact sheet, a shoot timeline and a comment thread.

All 170 features blocks