shadcn.io is not affiliated with official shadcn/ui
Invite Link Onboarding Block for React
A setup panel with a read-only invite link and a Copy button, a Regenerate that asks first, and limits for the joining role, how long it lasts and how many people may use it.
Installation
Overview
Let a new user share one link and set its limits, with this invite step for React with Base UI. It is a setup panel of Tutormoor, a study-group app, ruled by Guides in bands. The first band is the link itself: a read-only field in an Input Group with a Copy Button, a Regenerate button that opens an Alert Dialog first, because the old link stops working, and one sentence that works out where the link stands (“3 of 10 uses used, expires in 7 days (Oct 21).”). The second band sets the limits: a Select for the role people join with, a Segment Group for how long it lasts (1 day, 7 days or never) and a Number Input for how many people may use it. Save link settings is the one Shine Button, quiet until something changed, with Discard beside it.
FAQ
Is the copy real?
Yes. The button writes the link to the clipboard and the status says “Link copied to the clipboard.”, or “Couldn't copy” with what to do when the browser refuses (a page not served over HTTPS, or no permission). The link itself is made up for this demo and opens nothing.
What does Regenerate do?
It opens an alert dialog with focus on “Keep this link”. Confirming swaps in the next typed link, sets the use count back to zero and says so a moment after the dialog closes, so a screen reader hears it. The role, expiry and limit you chose are kept. Escape and “Keep this link” leave everything as it was.
What can the use limit be?
Any whole number from the uses already counted (3 in this demo) up to 50. A smaller or larger number is set to the nearest allowed one when you leave the field, and the status says why.
How is the expiry date worked out?
From a fixed day, AS_OF (14 October 2026), plus the days you chose, with plain arithmetic in UTC, so it never depends on your clock or your time zone. “Never” says the link works until you regenerate it. In your app compute it on the server from the time the link was made.
What stays local in the demo, and how do I wire it?
Everything except the clipboard. The links, the use count and the limits are typed in the file, and Save link settings only says it was saved in this demo. In your app make the link and keep its use count on the server where regenerate and save say so, and enforce the role, expiry and limit there when someone opens it.