shadcn.io is not affiliated with official shadcn/ui
Centered Metric Cluster CTA Block for React
A 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.
Installation
Overview
A launch-day call to action for React with Base UI. A live badge, a headline and one sentence, centred in the page column, introduce Kestrel's launch day, and under them a small scoreboard sits in a hairline frame with + marks on its corners: the Upvote button in the middle with its number inside, the comment count on one side and today's rank on the other, three cells on shared hairlines. Press Upvote and the count rolls to the next number, the button turns solid foreground and the rank moves up a place; press it again and both roll back. A Shine Button underneath links to where the launch lives. It's built from Counter Button, Badge, Status, Guides and Shine Button, with CSS transitions for every movement and your theme's tokens for every colour. For launch days, product milestones and community drives where one visible number anchors the ask.
FAQ
How does the count work, and can it be pressed twice?
The button is controlled: it shows VOTES plus one while the visitor's vote is in, and a press toggles that vote. The first press rolls the number up by one, the second rolls it back, and it never goes past those two values. Nothing is sent anywhere, so it only shows the idea: to keep a real count, call your own endpoint where the block updates its state, and pass the total in as VOTES.
Where does the rank come from?
It isn't typed: RIVALS lists the other launches' votes, and the rank is one more than the number of launches that have more than you. With the example numbers you are fourth, and one more vote ties the third place, which the block counts in your favour. Change VOTES or RIVALS and the rank, and the sentence below the scoreboard, follow.
What do screen readers hear?
The Upvote button is named "Upvote", reports whether it is pressed, and says the new count from a polite status inside it. The sentence under the scoreboard is a second polite status that tells what the vote did to the rank, so a press is announced once as a number and once as a result. Comments and rank are a term and its description each.
Why does the Upvote button turn grey and black, not green?
Only the Shine Button is primary. The pressed Upvote button takes aria-pressed:bg-foreground, so it reads as selected in any theme without a second primary colour.
Where does the last button go?
Support the launch is a link (href="#"): point it at your launch page.
It renders the link it's given with render, with nativeButton={false}.
How does the scoreboard fit a phone?
Below the sm breakpoint the Upvote button takes the first row and the comments and rank share the row under it, two cells of equal width. From sm up the three sit in one row with the button in the middle. The sentence under it keeps room for two lines, so pressing never moves the button below. With reduced motion the digits change in place instead of rolling.
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
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
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 Launch Badge Hero
Logos and social proofA centered launch-day hero with a rank badge that links to the launch page, a Shine Button and three launch metrics in separate cells whose hairlines overshoot their corners.
- Pro
Animated Counter Hero
Stats and live dataA compact centered hero for an invoicing app with an announcement pill, a Shine Button and a second action, over a hairline band of four figures that count up when they scroll into view.
- 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.