shadcn.io is not affiliated with official shadcn/ui
Team Invite Acceptance Login Block for Ark UI
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 Ark 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.