shadcn.io is not affiliated with official shadcn/ui
Light Split CTA with Ranked Avatar List Block for Svelte
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 Svelte with Ark 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.
The Shine Button renders its a through asChild, so the button's styles land on the link.
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.