Team Builder

Cards 1

About

Elegant animated team member selector with drag-free layout transitions, search, and progress ring.

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

Code

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

Usage.tsx

import TeamBuilder, { type TeamMember } from "@/components/ui/team-builder";
import React from "react";

export default function DemoOne() {
  const [selected, setSelected] = React.useState<string[]>(["1", "3"]);

  const MOCK_MEMBERS: TeamMember[] = [
    { id: "1", name: "Alex Morgan", email: "alex@company.com", role: "Design", avatar: "https://cdn.21st.dev/assets/mirror/4c/4ca3ecc67e7d73a69456cc79a7cc3e57408a3f94b88a68e21effd3247bdf794c.jpg" },
    { id: "2", name: "Ben Sisko", email: "ben@company.com", role: "Eng" },
    { id: "4", name: "Darren K", email: "darren@company.com", role: "Eng", avatar: "https://cdn.21st.dev/assets/mirror/e5/e55e8d544c269839ddf17388dee3a763e2f3552b13faa60fe8f71673fb1d4c48.jpg" },
    { id: "5", name: "Evan Wright", email: "evan@company.com", role: "Marketing" },
    { id: "6", name: "Fiona Gallagher", email: "fiona@company.com", role: "Sales", avatar: "https://cdn.21st.dev/assets/mirror/91/9114aafb8566d8c8413d7d606618bdb572939bddbcde964efd2bb82a3e26544b.jpg" },
    { id: "7", name: "George Martin", email: "george@company.com", role: "Legal" },
  ];
  return (
    <div className="flex min-h-screen items-center justify-center bg-white text-black dark:bg-black dark:text-white">
      {/* <FastInternetPage/> */}
      <TeamBuilder
        members={MOCK_MEMBERS}
        selectedIds={selected}
        onChange={setSelected}
        maxMembers={5}
      />
    </div>
  )
}