Invite Teammates

Component 2

About

Invite Teammates Component This component allows users to invite new members via email, generate a shareable link, and view the status of existing team members. It's built with accessibility and reusability in mind, featuring smooth animations for list rendering.

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

Code

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

Usage.tsx

import { InviteTeammates } from "@/components/ui/invite-teammates"; // Adjust the import path

const Demo = () => {
  // Sample data for the teammates list
  const sampleTeammates = [
    {
      name: "Arlo Finch",
      email: "arlofinch@company.com",
      avatarUrl: "https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg",
      status: "Online" as const,
      lastActive: "",
    },
    {
      name: "Juniper Lane",
      email: "juniperlane@company.com",
      avatarUrl: "https://cdn.21st.dev/assets/mirror/db/db395a118244043772f21d6cd644901eaf89eab5a3dfcedcc73c255a4d6417e0.jpg",
      status: "Away" as const,
      lastActive: "2 mins",
    },
    {
      name: "Rowan Sage",
      email: "rowansage@company.com",
      avatarUrl: "https://cdn.21st.dev/assets/mirror/9a/9a3f3f88dac2ceb807e98d4cbe99acc9813da6d0ce2859b1cf026747727e1667.jpg",
      status: "Away" as const,
      lastActive: "2 days",
    },
    {
      name: "Finnian York",
      email: "finnianyork@company.com",
      avatarUrl: "https://cdn.21st.dev/assets/mirror/34/346464a2e3f1a5ef41c81c73d08727d0c784e9445031fa30849ee60fc48dd425.jpg",
      status: "Inactive" as const,
      lastActive: "1 year",
    },
  ];

  // Handler functions to demonstrate interactivity
  const handleInvite = (emails: string[]) => {
    console.log("Inviting emails:", emails);
    // Here you would typically make an API call
    alert(`Invited: ${emails.join(", ")}`);
  };

  const handleGetLink = () => {
    console.log("Generating shareable link...");
    // Logic to copy link to clipboard
    navigator.clipboard.writeText("https://example.com/share/file-12345");
    alert("Shareable link copied to clipboard!");
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <InviteTeammates
        teammates={sampleTeammates}
        onInvite={handleInvite}
        onGetLink={handleGetLink}
      />
    </div>
  );
};

export default Demo;