shadcn.io is not affiliated with official shadcn/ui
Invite Accepted Roster Success Block for React Aria
A confirmation page for a teammate joining: who invited them and when, how many seats are used, and a roster where the new member's row is marked Joined and holds a role select that changes the role sentence below.
Installation
Overview
Welcome a new teammate and let the owner set their role at once with this confirmation page for React with React Aria. It's the page Planmoor, a team planner, shows its owner when an invitation is accepted: the page's side rails and one band, with a start-aligned column. A check in a tile, the new member's name in the heading, one sentence and, at the header's end, the one Shine Button, Open the team. Under it one card framed by Guides in three parts: what happened (who invited, when it was accepted, the role they joined with), the seats as a Progress bar with "6 of 8 seats used" counted from the roster, and the roster itself, newest first, six rows with an Avatar of initials, where the new member's row carries a Badge and a Native Select for the role. For team invitations, seat-based plans and any join that needs a role.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was saved. The six people, the invitation and the seat count are typed sample data, and the role select only changes this page: the "Joined as" line, the sentence under the roster and a polite status line ("Dara Okonkwo now joins as Viewer. Not saved: this demo only changes this page.") follow it. To wire it, build MEMBERS and INVITE from your roster and the accepted invitation, and send the new role from changeRole.
Where does the seat count come from?
From the roster: "6 of 8 seats used" is the length of MEMBERS against the plan's SEATS, and the bar's fill uses the same two numbers. Add or remove a member in the data and the text and the bar move together.
How does the role select work?
It's a native select named "Role for" the person, so it opens the system's own picker on a phone and works with a keyboard everywhere. It offers Admin, Editor and Viewer; the owner's role is not changeable, so the other rows are plain text. The sentence under the roster says what the chosen role allows and holds its height, so nothing moves when you change it.
Are the people real, and are there photos?
No. The names and addresses are made up (the addresses end in .example), and each person is an avatar of two initials: the block never uses a photo.