shadcn.io is not affiliated with official shadcn/ui
Team Tiers With Avatar Clusters Block for React Aria
Three team-size plans, each opening with a cluster of avatars sized to its host range, then its per-host price, a call to action and its features, with a segmented plan switcher on a phone.
Installation
Overview
Size your plans by the people in the room with this team-tier pricing section. Three plans share hairlines on a desktop, and each opens with a picture of its audience: two large avatars for Duo (1–2 hosts, free), a row of six for Crew (3–25 hosts, $12 a host a month) and a dense cluster of sixteen for Floor (26–250 hosts, $20), all in greyscale and no taller than 64 pixels. Under each cluster come the host range, the plan's name and price, a one-line description, a Shine Button and a checklist of what it includes. Crew is tinted, carries a Badge and holds the block's one primary button; the other two buttons are outlines. Below md a Segment Group shows one plan at a time with Crew selected first. The page's top rule and the + marks where the band's lines meet are drawn by Guides. Built with Badge, Segment Group, Shine Button, Guides, Lucide icons and Tailwind CSS. For meeting, chat and collaboration tools priced per host, and any product whose plans are really team sizes.
FAQ
How do I change the plans and their clusters?
Edit the PLANS array at the top of the file. Each plan has its name, range, per-host price (0 shows "Free"), tagline, features, call to action and href, popular for the tinted plan, and avatars and disc for its cluster: how many of the sixteen initials in PEOPLE to show and how big each one is. Keep the cluster at about 64 pixels tall so it stays a mark and doesn't push the price down the page.
How do I send a plan to checkout?
Each call to action is a real link to its plan's href. It's a ShineButton with href, which React Aria renders as a link. Point Duo at your sign-up, Crew at checkout with the plan in the address (/checkout?plan=crew) and Floor at your sales form; create the Crew and Floor subscriptions with a per-unit price and the number of hosts as the quantity.
Is the plan switcher accessible?
Yes. Below md the switcher is a SegmentGroup, a radio group named "Plan": Tab reaches the selected plan and the arrow keys move and select. The plans that aren't showing are visibility: hidden, so they're out of the tab order and hidden from screen readers, and there are no hidden focus traps; they keep their space, so the block doesn't change height when you switch. On a desktop every plan shows and the switcher is hidden. The clusters are decorative; the host range under each one says the same in words.
How does it look on a phone?
The switcher sits under the headline with Crew selected, so the recommended plan and its button are within the first screen and a half of an iPhone; Duo and Floor are one tap away. The cluster, range, price, button and features of the chosen plan stack in one column. The headline and the line beside it stack too, and the line stays start-aligned.
Why avatars instead of icons?
Because the thing that separates these plans is how many people use them, and a crowd says that faster than a number. A reader can tell a pair from a floor at a glance, before reading a word, which is the card-size test for a plan grid. The clusters are made of initials, not photos, so they work in every theme and never imply real customers.