# Invite Team
URL: https://remocn.dev/docs/product-scenes/invite-team

An invite field types emails, sends invites and a toast confirms in a project list

- Install: `npx shadcn@latest add @remocn/invite-team`
- Vibe: clean
- Natural length: 170f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/invite-team
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { InviteTeam } from "@/components/remocn/invite-team";

const InviteTeamScene = () => (
  <InviteTeam emails={["maya@kitebase.io", "leo@kitebase.io"]} role="Editor" workspace="Kitebase" />
);

export const RemotionRoot = () => (
  <Composition
    id="InviteTeam"
    component={InviteTeamScene}
    durationInFrames={215}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A project app opens behind an invite modal; a cursor types up to three emails into chips, switches the role in a select, clicks send, and avatars fly into the header while a toast confirms. Pass `emails`, `role` and `workspace` to make it yours, and `images` with your own project thumbnails (the default files only exist in the Remocn repo). It ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `emails` | `string[]` | — | Emails typed into the invite field (up to 3 fit best). |
| `role` | `string` | `"Editor"` | Role the select switches to. |
| `workspace` | `string` | `"Kitebase"` | Workspace name shown in the modal and app. |
| `images` | `string[]` | `DEFAULT_IMAGES` | Project thumbnail URLs behind the modal; defaults ship with Remocn only. |
| `theme` | `"light" \| "dark"` | `"light"` | Visual theme; ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and controls. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Preset id for the gradients.sh background shader. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader parameters of the chosen ground. |

## Use when
- An onboarding or collaboration beat where a teammate invite is typed and sent in a few seconds.
- A team-plan launch video showing how easy it is to add people to a workspace.
- A product tour moment that ends on a confirmation toast over a project list.

## Don't use when
- You want several people working live on one canvas — use `multiplayer-cursors`.
- The confirmation is a payment or checkout, not an invite — use `invoice-paid`.
- You need a cursor opening a card from a button — use `button-to-card`.