shadcn.io is not affiliated with official shadcn/ui
Invite Link Empty Team Error Block for Vue
A members page for a team nobody has joined: a roster with you as Owner and dashed places, and an invite link with expiry, use limit and approval settings, a QR code, a real copy button and a reset.
Installation
Overview
Give a team with one member a way to fill up, with this invite link members page for Vue with Ark UI. It's the screen of Crewmark, a crew-scheduling app: a whole page with the page's rails and one band across it, split by a hairline drawn with Guides. At the start the heading ("You're the only one here") over a framed roster: you as the Owner, then three dashed places for the people who have not joined. At the end a framed card with the invite link in a read-only Input Group, its QR Code, two Native Selects (how long the link works: 1, 7 or 30 days; how many people can use it: 1, 10 or 50) and a Switch for whether anyone with the link joins as a Member or you approve each person. Changing a setting makes a new link, so the token and the QR code redraw. The one Shine Button, Copy invite link, really copies it, and then the first dashed place reads "Waiting for the first person"; Reset link makes the next token. It's built from Input Group, Native Select, Switch, QR Code, Button, Shine Button and Guides, with a CSS entrance only. For any app that adds people with a link.
FAQ
Where does the token come from?
It is made up for the demo: a small deterministic function turns the settings and the number of resets into nine characters, so the same settings always give the same link and each reset gives the next one. Never build a real token like this. Create the link on your server (a long random token with an expiry, a use limit and a role stored beside it) and return it to the page.
Does Copy invite link really copy?
Yes. It writes the link to the clipboard and says so in the status line ("Copied the invite link. Nothing was sent."). If the browser refuses (a page that is not secure, or a blocked permission) it says that instead and you can select the link in the field by hand. Nothing is sent anywhere.
Why does nobody join?
Because a demo cannot honestly make someone join. The roster stays at one member; copying the link only changes the first dashed place to say what it waits for, and a setting change takes that back, since it makes a new link nobody has seen. In your product the roster fills from your members API.
What does the QR code encode?
The same link as the field, redrawn whenever it changes. It is hidden on a phone, where you share the link itself; it is drawn in black on white by the QR Code item so that scanners read it in any theme.