shadcn.io is not affiliated with official shadcn/ui
Centered Number With Stats CTA Block for React
A 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.
Installation
Overview
A single-number call to action for React with Base UI. A raised panel inside a tinted shell, light on a light page and dark on a dark one, with + marks on the shell's corners, leads on its start side with one large anchor figure and a line that says what it counts (10,000+ developers deploy with Cairn every week), then a Shine Button. On its end side three supporting stats are listed like the lines of a receipt: the label, a dotted leader and the value, in a monospaced face. It's built from Data List, Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For community milestones, customer counts and any closing section where one big number is the pitch and the rest is proof.
FAQ
How do I change the big number and the stats?
The anchor figure and its line are in the heading; edit them in place. The three stats are STATS at the top of the file, a label and a value each. The heading reads as one sentence to a screen reader, "10,000+ developers deploy with Cairn every week", so keep the figure and the line together.
How is the dotted leader drawn?
It's the label's own after pseudo-element: a flexible box with a dotted bottom border that fills the space between the label and the value. It adds no element to the page, so a screen reader hears the label and the value as a term and its description with nothing between them, and it shortens when a label or value is longer.
Why are the values wrapped in a bdi element?
A value with a sign or a unit ("99.9%", "140+", "4.9/5") is isolated in a bdi, so a right-to-left layout keeps it in reading order instead of moving the percent sign or the plus to the wrong side.
How is the card in card built?
A shell (rounded-2xl border bg-muted/50 p-1.5) holds a panel (bg-card shadow-lg ring-1 ring-foreground/15), and a Guides on the shell draws the + marks on its corners. The raised look comes from structure, not from a coloured fill, so any preset reads the same.
Where does the button go?
Join the Cairn community is a link (href="#"): point it at your community page.
The Button renders the link it's given with render, with nativeButton={false}.
How does it fit on a phone?
The two halves stack: the figure steps down from text-7xl to text-6xl and the button follows it, then the receipt takes the panel's width with the leader shrinking to fit; at 320 pixels the longest label still keeps a stretch of dots. Each part fades up once on load, and with reduced motion the section simply appears.
Related
- Pro
Stat Hero CTA
Figures and statsA reverse split call to action with a giant hollow figure that floods with colour as it scrolls into view in the start cell, then a solid divider, a headline, one sentence, a Shine Button and a quiet second action.
- 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 Metric Cluster CTA
Figures and statsA centred launch-day call to action with a scoreboard drawn as a framed figure: an Upvote button whose count rolls on press, flanked by the comment count and today's rank, and a Shine Button.
- Pro
Card Inset Metric Row CTA
Figures and statsA 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.
- Pro
Hero With Stats
Stats and live dataA split hero with a headline, a Shine Button and a second action beside a rail of four key figures on shared hairlines, each with its period and a small bar trend.
- 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.