shadcn.io is not affiliated with official shadcn/ui
Card Inset Metric Row CTA Block for React
A start-aligned card-in-card CTA for an API platform: a headline, one sentence and two calls to action, with three platform figures in a closing band across the foot of the panel.
Installation
Overview
A card-in-card call to action for React with Base UI. A muted shell with + marks on its corners wraps a raised panel that is light on a light page and dark on a dark one. At the start, a large left-aligned headline, a short paragraph and two buttons, the Shine Button and an outline one; across the foot of the panel, a closing band tinted a step darker holds three platform figures (calls per day, uptime, latency) between hairlines, side by side from sm and one per row on a phone. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For infrastructure products, developer platforms and any closing section where a few hard numbers earn the click.
FAQ
How do I change the figures?
Edit METRICS at the top of the file: each entry is a value and a label. Each figure is a term and its description in one list, with the label under the value, so a screen reader hears "API calls per day, 2.4B+". Keep it to three: they sit side by side in the band from sm and stack, one per row, below it.
Why is the latency written as Under 50 ms?
A figure that carries a sign or a unit is wrapped in a bdi element, so a right-to-left layout keeps "99.99%" and "Under 50 ms" in reading order instead of moving the sign or the unit to the wrong side. The comparison is written as words because a bare less-than sign breaks in markup and reads badly aloud.
Where do the buttons go?
Both are links (href="#"): point Start building at your sign-up and View documentation at your docs. Start building is a Shine Button: a band of light sweeps across it once on hover and keyboard focus.
Each button renders the link it's given with render, with nativeButton={false}.
Does the inner panel follow my theme?
Yes. The panel has no dark scope, so it is light on a light page and dark on a dark one. Nothing is a fixed colour, so it follows whichever preset you install, and the muted shell, the shadow and the ring keep it separate from the page in both modes.
Related
- Pro
Stat Strip CTA
Figures and statsA band call to action with the headline and a Shine Button in a header band, then a closing band of three figures that are tabs, divided by solid hairlines: pick a figure to read how it is measured.
- Pro
Centered Number With Stats CTA
Figures and statsA card in card call to action that follows your theme: one anchor figure at display size with a Shine Button, beside three supporting stats set like a receipt with dotted leaders.
- Pro
Card Inset Step List CTA
Lists and stepsA reverse-split card-in-card call to action for a migration: a ruled timeline of three steps with a time chip each and a closing total, beside the headline and a Shine Button, with trust points on the shell beneath.
- Pro
Left-Heavy Metric Cards Hero
Stats and live dataA split hero for an API host: copy and two calls to action beside a column, behind a divider, of three metric cells whose lines overshoot their corners and whose figures roll up into view.
- Pro
Counter Stats Hero
Stats and live dataA compact, start-aligned hero for an email API on solid rails: a headline, a Shine Button and an outline button, then four counters in separate cells whose hairlines overshoot their corners.
- Pro
Card Inset Big Metric Checklist CTA
Figures and statsA card-in-card startup-program CTA split in two: one giant credit figure circled by a hand-drawn pen stroke in a hairline frame at the start, and the headline, a three-line checklist, a Shine Button and an eligibility note at the end.