shadcn.io is not affiliated with official shadcn/ui
No Team Members Empty State Block for Radix UI
A team directory's empty state as a bulk paste: a box for one person per line, a table that previews every line it reads and flags the ones it cannot, and an isometric office floor where a desk fills for each person.
Installation
Overview
Let a whole team arrive at once, with this no team members empty state for React with Radix UI. A whole screen with the page's rails and one band across it, a plus mark where they meet. The heading sits beside an isometric office floor seen from above with six desks: yours, plated "You", and five dashed ones. Under it a Textarea in a Field takes one person per line as "Name, email", "Name <email>" or a bare address. A table previews every line it reads, with the person's initials in an Avatar, the name, the email and the role Member, and flags a line it cannot read ("Line 3: no email"); each person it can use fills a desk on the floor. The Shine Button, the only colored control, says how many it will add, "Add 3 members", and adds them to the floor in this demo. The band is ruled by Guides, the floor is one SVG whose classes change, and the transitions are CSS only. For the first-run team page of any directory, HR or collaboration product.
FAQ
What stays in the page, and how do I make it real?
The team lives in the page's state: reload and the floor is empty, and Start over clears it without a reload. Nothing is sent, saved or emailed, and the words say so. To wire it for real, post the rows that are ready to your invite API where the code says so, then seat the people from its response with their server ids and show a pending state until they accept.
What does it understand, and what does it flag?
Each non-empty line is read for an address, the part with an at sign, and a name, the rest. "Sunniva Aldebert, sunniva@thatchwork.example", "Kofi Brandvold <kofi@thatchwork.example>" and a bare "marguerite.anselm@thatchwork.example" (named Marguerite Anselm from the address) all work. It flags a line with no email, an address that does not look like one, an address already pasted or already on the team, and a line that would not get a desk, and says so in the table with the line number. The page reads the first five lines.
How does the floor work?
Your desk is always taken. Each person that is ready takes the next dashed desk, which turns solid with a monitor, a chair and their initials, as you type and not only when you press Add, so the floor shows what will be added; people already added keep their desks. With five desks taken, further people are flagged as having no desk, since the demo holds five.
Is it usable with a keyboard and a screen reader?
The box is labelled, the table has a caption, headers and a row header, and a flagged line says which line and why in words, not only an icon. One polite status line gives the verdict ("3 ready, 1 line to fix.") a moment after you stop typing, never on load, and then each result. The floor is decoration, hidden from assistive technology, with the people listed for screen readers as "On the team".