shadcn.io is not affiliated with official shadcn/ui
Centered Metric Cluster CTA Block for Svelte
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 Svelte with Ark 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.
Its asChild receives its props: spread them onto your router's link.
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.