shadcn.io is not affiliated with official shadcn/ui
Invite Accepted Roster Success Block for React
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 Base UI. 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.
Related
- Pro
Invitation Status Sheet Success
People and approvalsA crew page with the sheet that says where each of twelve invitations stands, shown open: filter chips with counts, a status word and time per person, a Resend button on every row and a Resend all pending.
- Pro
Seat Management Billing
Plan and usageSeats on a team plan: members with a role each (viewers are free), a stepper for the seats you pay for, and the monthly and prorated cost worked out before you save.
- Pro
Team Members Account
Shared accessThe people who can sign in to a shared account as hairline tiles: role menu, two-factor on or off, last sign-in, those without two-factor first with a reminder button, pending invitations and an invite form.
- Pro
Invite Members Dialog
Share and inviteA household calendar's Members page with its invite dialog shown open: one email field that knows the household's domain, so an outside address joins as a guest, the people who already have access, and a Send invite button that adds a pending row.
- Pro
Team Members Settings
Team and rolesA members panel with seat and two-factor meters, a native table with row selection, a role menu per person and, pinned at the foot, a bulk role change and Remove that an Undo walks back one step at a time.
- Pro
Role Change Permissions Success
Security and accessA role change confirmation inside an app panel: the role before and after, who changed it and when, how many permissions were gained and lost, and a table of eight capabilities with the new ones marked.