shadcn.io is not affiliated with official shadcn/ui
Light Split CTA with Ranked Avatar List Block for React
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.
Installation
Overview
A reverse split closing section for React with Base UI, built around a small leaderboard. Between solid rails, the start side holds this month's ranking in one bordered panel: the top three members as Item rows on shared hairlines (a rank in a foreground circle, an initials Avatar, a name and a count in tabular figures), then, after a strip of three dots, the visitor's own row, tinted and pinned in a second list that starts at its real rank (12). A solid divider that meets the top rule separates it from the end side: the headline, a sentence about Sundial (a fictional team calendar), the Shine Button and a line that works out how many more invites it takes to reach third place from the two counts. The copy comes first in the document, so a phone and a screen reader meet it before the list, and the button lands on the first screen. Everything is data, so the maths always matches the rows, and the entrance is a CSS fade that stands still for visitors who ask for reduced motion. Made for referral, ambassador and contributor programs where a visible ranking is the nudge.
FAQ
How do I change the leaderboard and the visitor's row?
Edit LEADERS (rank, name, initials, count) and YOU at the top of the file. The line under the list is derived: GAP is the count of the last leader minus yours, so it stays true when the numbers change. Keep LEADERS sorted from first place down, and set YOU.rank to the visitor's real position; the second list starts at that number.
How do I show a real visitor's position?
Render the block where you know who is looking, pass their name, initials, rank and count in as YOU, and fetch LEADERS on the server so the page arrives complete. When the visitor is signed out, drop the second list and the gap line and keep the call to action. Everything here is fictional sample data.
Is this ranked list accessible for screen readers?
Yes. Each ranking is a real ordered list with a name ("Top three members by invites sent this month", "Your position"), and each row reads its rank, its name and its count with the word "invites", such as "Rank 1, Sarah Chen, 47 invites". The column captions and the dots between the lists are decorative and hidden, and the list comes after the copy in the document even though it is drawn at the start on a wide screen. The section's one heading is an h2, and the counts are wrapped in bdi so they stay put in right-to-left languages.
On Base UI, the Shine Button renders its link with render={<a href="#" />} and nativeButton={false}.
Why are the ranks in dark circles?
The rank circles use the theme's foreground and background tokens, so they follow any preset and keep their contrast, and the Shine Button stays the only primary control in the block. The visitor's own row uses an outlined circle and a light tint instead, so it reads as "you" without a second filled color.
How does the list adapt to small screens?
Each row is a single line down to 320px: the rank, avatar, name and count only, with the word "invites" left to a caption above the list and to screen readers, so a long name never wraps against the count. Below lg the two sides stack, with a rule between them drawn by Guides. The list is at most 24rem wide, the headline wraps with text-balance, and the button stays one line.
Related
- Pro
Centered CTA with Avatar Social Proof
Social proofA 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
Centered CTA with Avatar Stack Button
Social proofA 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 Star and Fork Counts
Social proofA 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.
- Pro
CTA with Orbit Ring Avatars
Social proofA 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
Centered Light Trust Row CTA
Trust and securityA centred statement call to action for an accessibility scanner: a big headline, the Shine Button and an outline button, then a framed row of four trust cells on shared hairlines that each open a short note on what they cover.
- 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.