Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Centered CTA with Star and Fork Counts Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A centered closing section for an open-source project, for React with Base 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. On Base UI, each link button renders its link with render={<a href="#" />} and nativeButton={false}, including the Shine Button.

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.

How are the lines drawn?

The spine is a Guides with the top rule and plus marks, bleeding to the viewport edges. The proof strip is framed by a Guides with extend="sm" and marks="corners". Every line is a solid hairline.

What happens with reduced motion?

The only motion is a one-time fade-up on load, done with CSS transitions. With reduced motion turned on, it is skipped and everything is in place at once.

  • Pro

    Centered CTA with Avatar Stack Button

    Social proof

    A centred card-in-card call to action that follows your theme, whose single Shine Button carries the social proof: a stack of team avatars inside it, ahead of the label, with the trial terms on the shell.

  • Pro

    Centered CTA with Avatar Social Proof

    Social proof

    A centred statement for a community, closed by a band of six members on shared hairlines: each cell a link that opens a hover card with the member's role, status and join date, under one Shine Button.

  • Pro

    CTA with Orbit Ring Avatars

    Social proof

    A split call to action on drafting lines: an invite for a private community beside a framed ring of member avatars that turns slowly while the section is hovered or holds focus.

  • Pro

    Light Split CTA with Ranked Avatar List

    Social proof

    A reverse split call to action: a leaderboard at the start with the top three ranked, avatars and counts on shared hairlines and the visitor's own row pinned underneath, beside the headline and the Shine Button.

  • Pro

    Install Command Hero

    Code and terminal

    A compact centred hero for an open-source library with a star count pill, an install command to copy, a Shine Button, a GitHub star button and a ruled band of the repository's stats at the foot.

  • Pro

    Left-Aligned Social Proof Bar Hero

    Logos and social proof

    A compact start-aligned hero closed by a three-cell social proof bar on its own rule: an avatar stack with the user count, a five-star rating with the review count and a compliance mark.

All 100 cta blocks