shadcn.io is not affiliated with official shadcn/ui
Card Inset Metric Row CTA Block for React Aria
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 React Aria. 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 a link when it has an href.
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.