shadcn.io is not affiliated with official shadcn/ui
No Team Members Empty State Block for React
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 Base 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".
Related
- Pro
Invite Team Empty State
First runA 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.
- Pro
No Guests Empty State
Team and accessA collaboration tool's empty guest list: a pass to fill in (email, how long it lasts, view or comment), a visitor badge on a lanyard that fills as you type, a summary that rewrites itself, and a guest list of three dashed places.
- Pro
No Contacts Empty State
Team and accessA contacts book's empty state with two tabs: Add one, a name, email and company form, and Import CSV, a drop zone that reads the file's header in your browser; one button for the active tab and an address-card tray whose dashed place turns solid.
- 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
Team Members Account
Shared accessThe people who can sign in to a shared account as hairline tiles: role menu, two-factor on or off, last sign-in, those without two-factor first with a reminder button, pending invitations and an invite form.
- Pro
No Audit Trail Empty State
Team and accessA compliance tool's empty ledger: retention policy radio cards beside a vault door whose dial turns to the choice, and an empty table of Time, Actor, Action and Resource whose first row is written when the policy is saved.