shadcn.io is not affiliated with official shadcn/ui
Centered CTA with Star and Fork Counts Block for Vue
A centered call to action that follows the page theme, with Star and Fork buttons that each join a link to its count, beside a contributor avatar stack.
Installation
Overview
A centered closing section for an open-source project, for Vue with Ark UI. It's a statement between the page's solid side rails under a top rule, in the page's light or dark theme: a one-line headline, a sentence with a bold lead, two ButtonGroups and, under them, a proof strip framed by hairlines with a plus mark on each corner. Each group is a link segment (Star, Fork) joined to a count segment in a ButtonGroupText, so the number reads as part of the button; Star is the Shine Button, the one primary control, and Fork is an outline button. The strip holds five contributor avatars that end in a Float chip with the number of other contributors, and the total in words. The counts are plain data run through a fixed compact Intl.NumberFormat, with no GitHub brand and no request to an API, so nothing can be out of date in the markup you copy. Each part fades in once with CSS and stands still for visitors who ask for reduced motion. Made for library, framework and tooling pages that want one block to say "this is real, and you can join in".
FAQ
How do I show real star and fork counts?
ACTIONS holds a count per button. Fill it from your own build or a cached request on the server, so the numbers are in the page when it arrives; COMPACT formats 12,400 as 12.4K with a fixed locale, so the server and the browser print the same text. Point each link's href at the repository's page. The block makes no request itself, which keeps it fast and never wrong in a screenshot.
How do I change the contributor stack?
Edit CONTRIBUTORS for the faces shown and OTHER_CONTRIBUTORS for the number in the chip. The line beside the stack adds them together, so "347 contributors" always matches what you set. Float pins the chip to the end of the stack; it mirrors in right-to-left languages.
Is this accessible for screen readers?
Yes. Each ButtonGroup is a named group ("Stars", "Forks"). The link reads "Star the repository" and the count after it reads "12.4K stars", so a number is never read alone. The avatar stack and the chip are hidden, and the contributor total is stated in text beside them. The block's one heading is an h2.
Each link button renders its a through asChild, so the button's styles land on the link.
Why are the counts not links too?
A count is a statistic, not a destination, so it's text in a ButtonGroupText, not a second link next to the first. Only the Star and Fork segments are links; keyboard users tab through two controls, not four.
How does the block work with the page's theme?
Nothing in the block forces a scheme: the headline, the proof strip and the chip use the theme's tokens, so it is light on a light page and dark on a dark one. The Star button is a Shine Button in the theme's primary and Fork uses the outline style, so a new preset recolors both with no edits.