Empty Team, animated React component

An empty team page with dotted seats beside yours and an invite field below. Type an email or tap a suggested teammate and the avatar lifts out of the field and lands in the next free seat, marked pending.

Pro
Cards
Spring

Drops softly as each avatar lands in its seat, taps on Send invites and gives a quiet error bump when an email is invalid or already added; typing is silent. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

It's just you for now

Teams that invite in the first week stick around.

From orbitly.com

Props

Prop	Type	Default	What it does
seats	number	6	Total seats, including yours.
suggestions	string[]	3 people on domain	Teammates offered as one-tap chips under the field. Defaults to three people on domain.
domain	string	"orbitly.com"	The domain shown in the From line above the chips, also used for the default suggestions.
placeholder	string	"[email protected]"	Placeholder of the email field.
onAdd	(email: string) => void	undefined	Called with the email when an avatar lands in a seat. The autoplay demo never calls it.
onSend	(emails: string[]) => void	undefined	Called with every pending email when Send invites is pressed. The autoplay demo never calls it.
autoplay	boolean	false	Types an email, adds three people, sends the invites and starts over on a loop until someone touches it. Pauses off screen and never runs under reduced motion.
className	string	""	Extra classes for the card.
enableSound	boolean	true	Plays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/empty-team
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
empty-team/
empty-team.tsx
index.ts
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { EmptyTeam } from "@/components/empty-team";

export default function Page() {
  return (
    <main>
      <EmptyTeam />
    </main>
  );
}

Empty Team questions

Does it make sound, and how do I turn it off?

Drops softly as each avatar lands in its seat, taps on Send invites and gives a quiet error bump when an email is invalid or already added; typing is silent. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

Pro
NewSound
Empty Projects
Pro
NewSound
No Results
Pro
New
Skeleton Morph
Pro
NewSound
Morphing Dialog