Team Invite

Component 2

About

An animated illustration card showing two connected teammates while a cursor drags a third avatar into an empty slot to invite them onto the team.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Team Invite to your project and fits it to your theme.

Code

How Team Invite is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { TeamInvite } from "@/components/ui/team-invite";

export default function TeamInviteDemo() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-10">
      <article className="w-full max-w-[420px] text-center">
        <TeamInvite
          avatars={[
            { src: "https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg", name: "Maya" },
            { src: "https://cdn.21st.dev/assets/mirror/be/be1b67757a13dfec4386e8627236a7194c6bcfb07502dbd82f727f6ccac46bcd.jpg", name: "Finn" },
            { src: "https://cdn.21st.dev/assets/mirror/38/38eeaa3b65facaccd15508865c22bb499d64e3908f3054899844eb1068d7cada.jpg", name: "Lea" },
          ]}
        />
        <h3 className="mt-6 text-lg font-semibold text-foreground">
          Invite your team
        </h3>
        <p className="mt-1 text-sm text-muted-foreground">
          Bring everyone into the same workspace in seconds.
        </p>
      </article>
    </div>
  );
}