shadcn.io is not affiliated with official shadcn/ui
CTA with Orbit Ring Avatars Block for React
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.
Installation
Overview
A split closing section for React with Base UI, showing a community as a constellation. The block sits on the page's spine: two side rails at the page column and one top rule with a + mark on each crossing, so it joins the blocks above and below it. On the start side sit a headline that names the product and the member count, one sentence, a Shine Button ("Request an invite") and an outline link; a hairline divider separates them from the end side, where a frame with + marks on its corners holds eight member avatars on a ring around a medallion. At rest it is still; while the pointer is over the section, or focus is inside it, the ring turns slowly and each avatar turns back so its initials stay upright. On phones the copy comes first and the ring follows under a rule, so the button is on the first screen. The motion is plain CSS, it never starts by itself, and it is removed for visitors who ask for reduced motion. Made for community, user-group and invite-only program pages that want a "we are many" picture without photos.
FAQ
How do I add or remove avatars on the ring?
Add or remove entries in MEMBERS. Each avatar's place comes from placeAt, which sets an --angle CSS variable of 360 divided by the number of members times its index, so any count from five to twelve stays evenly spaced with no coordinates to recompute. Keep the avatars small enough that neighbors don't touch at 320px; eight at 40px is comfortable.
When does the ring move, and what about reduced motion?
Only while the section is hovered or something in it has focus: the animation is always set but paused, and group-hover and group-focus-within start it, so it is something a visitor does, never something that runs at them. It pauses where it stops when the pointer leaves. With reduced motion turned on, there is no animation at all and the ring stays as drawn. Nothing carries information, so nothing is lost.
Is this orbit ring CTA accessible for screen readers?
Yes. The whole frame, the ring, the avatars and the medallion are decorative and aria-hidden, and the headline already says "Join 12,000+ people shaping Plinth in the open", with the count in bdi to keep it in order in right-to-left languages. The section's one heading is an h2, the two actions are links named by their text, and keyboard focus shows a ring on each.
On Base UI, the buttons render their links with render={<a href="#" />} and nativeButton={false}.
How does the layout adapt to small screens?
Below lg the two sides stack: the copy first, then the framed ring under a hairline rule that carries + marks at the rails. The frame is as wide as the column up to 18rem (20rem from sm), and everything on the ring is placed by percentage and by angle, so it keeps its proportions from 320px to desktop. The headline and the two buttons wrap.
How does the block work with the page's theme?
Every colour is a token: hairlines are border, the avatars are muted discs and the medallion is bg-foreground with text-background, so it is light on a light theme and dark on a dark one. The Shine Button is the one place the theme's primary colour appears.
Related
- 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 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 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
Light Split CTA with Ranked Avatar List
Social proofA 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
Icon Accent CTA
With a closing bandA band call to action with an accent icon in a hairline frame, a Shine Button and a docs link, and a closing band of three cells that fill in one by one when you press Deploy now.
- Pro
Centered Founder Avatars Hero
Logos and social proofA centered hero led by its founders: a headline, a Shine Button and an outline button, then the three founders as separate hairline cells with avatar, role and background, and a line of backers.