shadcn.io is not affiliated with official shadcn/ui
Team Invite Acceptance Login Block for React
An invitation page for a shared team calendar: the workspace tile, Maya invited you to Hollin Row Studio, the Editor role and three members as initials with 9 more beside a form with the invited address locked, a name and a new password, or just the password for an existing account.
Installation
Overview
Welcome someone into a team they were asked to join, with this team invite login block for React with Base UI. It's the invitation page of Weekloft, a shared team calendar: the page's side rails run the full height of the screen and one band crosses it between two rules, split by a divider that meets both with a plus mark. At the start is the invitation itself: the workspace's initials tile, "Maya invited you to Hollin Row Studio", the role it comes with in a Badge and three members as initials in an Avatar group with "+9". At the end is the form: the invited address in a read-only Input Group with a lock, then a name and a new Password Input, with a Shine Button to join, the only colored control. "Already have an account? Sign in" switches the form to the password alone, in the same space and at the same height. It's built from Avatar, Badge, Field, Input, Input Group, Password Input, Button, Shine Button and Guides, with CSS transitions only. For collaboration products that grow through invitations.
FAQ
What stays in the page, and how do I make the invitation real?
The invitation (the workspace, the inviter, the role, the address and the member count) is a typed constant, so the page shows the same thing to everyone, and joining waits less than a second before saying what a real product would do, with a polite status message that nothing was sent. In a product, put an unguessable token in the link, look it up on the server when the page renders, show the invitation it belongs to (and an expired or used one as its own page), and send the token with the name and password.
Why is the invited address a read-only field, and not plain text?
The invitation is for that address, so it can't be changed here. It stays a real field, read-only and not disabled, so it keeps its place for assistive technology and password managers (autocomplete email for a new account, username when signing in) and is still sent with the form. The lock icon and the line under it say it came with the invitation.
What does Already have an account change?
The name and new password give way to a single password field, the button reads "Sign in and join", and the line under the form offers the way back. Both versions sit in one grid cell, so the form doesn't change height and nothing moves. Focus goes to the password, and a polite message says which version is showing.
Are the members and the count real?
No. The three people are typed initials with no photos or names beyond the count, "12 members", derived from three shown and nine more. They are decoration for the page's point, that the team exists, and are hidden from screen readers, with the count in text beside them. Don't show real people without their agreement.
What happens to the invitation on a phone?
It stacks above the form as the page's header, because it is the content, not a drawing: the workspace tile, the sentence naming who invited you, the member row and the role. The Weekloft line and the sentence under the heading are hidden to keep the Join button on the first screen. A rule between the two keeps them apart.
Related
- @Pro
Create Account Handle Check Login
Sign-up and consentA sign-up page for a community forum in two columns of fields: a handle with an at sign that checks itself against a typed taken list and offers three tries as buttons, then the email, a password with an eight-character hint and Create account.
- Pro
Workspace Picker Login
Workspaces and rolesA sign-in page that starts from the workspaces this browser remembers: tiles on hairlines with an add cell, a password field that fills the space under the grid, and Forget with a permanent Undo.
- Pro
Organization Select Login
SSO and providersA sign-in page that starts from the organisation: a combobox over six companies narrows as you type, and the one you pick sets the form below it, single sign-on only, password and code, or password alone.
- Pro
Welcome Back Login
Account choosersA full-height returning-user sign-in for a reading tracker: a large initials avatar, Welcome back, Dara, a read-only address and one password field, with a swap to a different account at the same height.
- Pro
Role Select Login
Workspaces and rolesA role chooser after sign-in: three radio rows (Admin, Editor, Viewer) beside a capability matrix whose cells say Can or Cannot in words, re-read as you pick, and one button that continues as the chosen role.
- Pro
Tenant Select Login
Workspaces and rolesThe workspace chooser shown after sign-in: a signed-in line, a filter, a native table of four workspaces sortable by name or last used, a star that sets the default and one button that opens the chosen one.