shadcn.io is not affiliated with official shadcn/ui
Invite Team Empty State Block for React
A full-height invite page for a team chat app: a drawn round table with five chairs that fill as email chips are added, a role select with a sentence per role, and one button that counts the invites and lists them.
Installation
Overview
Fill an empty team with a picture of the table it will sit at, with this invite team empty state for React with Base UI. It's the invite page of Roundelay, a team chat app: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. Above the heading an outline drawing of a round table seen from above has five chairs and one lamp; the first chair is yours and the other four are dashed. A Tags Input turns each email address you type, paste or end with a comma into a chip, checks it, and fills the next chair with its initials, while a Native Select in a Field picks the role (Member, Admin or Viewer) and says in a sentence what it can do. The Shine Button, the only colored control, counts the invites in its label; pressing it lists them under the table, with a line saying nothing was sent and a Start over that sets the table again. The frame is ruled by Guides, and everything moves with CSS transitions only. For the first screen of any workspace that is still just you.
FAQ
What happens when I press Send, and what stays in the page?
Nothing leaves the page. The addresses and the role are kept in the page's state and listed under the table, a polite status message says "2 invites listed in this demo. Nothing was sent.", and Start over empties it again. To wire it for real, post the addresses and the role to your API where the code says so, keep the form until it answers, then show the list or the errors it returns.
How are the addresses checked?
Enter, a comma, leaving the field or pasting a list adds what is typed. An address has to look like one (a name, an at sign and a domain), may be added once, and the table takes at most four besides you. Anything refused leaves the field as it was and writes the reason under it ("name@ isn't a valid email address", "… is already on the list"). A pasted list adds the valid ones it can and drops the rest.
How does the table react without moving anything?
It is one inline SVG of outlines in which each chair is a dashed circle; when an address takes the seat the circle fades out and a solid disc with the initials, real text laid over the SVG so it follows your font, fades in. The first chair says You. Reduced motion switches the fade off, and the drawing is hidden from screen readers: the field, the chips, the counted button label and the status line carry the meaning.
Is it usable with a keyboard and a screen reader?
Tab runs through the address field (Backspace removes the last chip, and each chip has a delete button), the role select and Send. Enter in the field adds an address; Enter anywhere else in the form sends. The label of the button says how many invites it will list, and while there are none it stays in the tab order with the reason written under the field instead of being disabled.
Does the page change height as chips are added?
No. The field is a box of a fixed height that scrolls inside when the chips outgrow it, the hint and the role's sentence keep their lines, and the list that replaces the form shares its grid cell. The page is at least a screen tall (min-h-svh) and keeps the content a little above the middle, so a changing height would move the heading; this one doesn't.
Related
- Pro
Welcome Workspace Empty State
First runA full-height welcome page for a fresh workspace: an isometric plan of an empty studio whose four rooms are a choice group, one sentence about the room you picked, and one Create your first project link.
- Pro
Getting Started Empty State
First runA getting-started card for an empty dashboard: four setup steps as real checkboxes, a headline that counts down with a progress bar, and a drawn trail up a hill with a flag that stands at the done count.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.
- 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
Centered Seat-Capped Invite CTA
Urgency and limitsA centred card-in-card CTA with a tags input of teammate emails that stops at the seats a plan has left, ten seat dots that fill as you add chips and a Shine Button that counts the invites.
- Pro
Connect Tools Empty State
Apps and integrationsA full-height first-run screen for an integration hub: six tool cards with checkboxes at the end, and at the start a drawn hub whose spokes turn from dashed to solid, and whose sockets take a lettermark, as each tool is ticked.