Team Gallery

Installation

pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add https://ui.sanjid.shop/r/team-gallery.json

Props

Basic Usage

1import { TeamGallery } from "@/components/ui/team-gallery";

1export interface TeamMember {2  id: number;3  name: string;4  role: string;5  bio: string;6  image: string;7  socials: {8    linkedin: string;9    github: string;10    twitter: string;11    mail: string;12  };13}14export const TeamMembers: TeamMember[] = [15  {16    id: 1,17    name: "Alice Johnson",18    role: "Product Designer",19    bio: "Alice is a passionate product designer with over 5 years of experience in creating innovative and user-centered products.",20    image:21      "https://img.freepik.com/premium-photo/tik-tok-icon_665280-69394.jpg?ga=GA1.1.2123848024.1747422116&semt=ais_hybrid&w=740",22    socials: {23      linkedin: "https://linkedin.com/in/alice-johnson",24      github: "https://github.com/alice-johnson",25      twitter: "https://twitter.com/alice_johnson",26      mail: "alice.johnson@example.com",27    },28  },29  {30    id: 2,31    name: "Bob Smith",32    role: "Frontend Developer",33    bio: "Bob is a skilled frontend developer with expertise in React and Next.js. He has a passion for creating responsive and user-friendly interfaces.",34    image:35      "https://img.freepik.com/premium-photo/men-design-logo-avatar_665280-69418.jpg?ga=GA1.1.2123848024.1747422116&semt=ais_hybrid&w=740",36    socials: {37      linkedin: "https://linkedin.com/in/bob-smith",38      github: "https://github.com/bob-smith",39      twitter: "https://twitter.com/bob_smith",40      mail: "bob.smith@example.com",41    },42  },43  {44    id: 3,45    name: "Max Payne",46    role: "Project Manager",47    bio: "Max Payne is a skilled project manager with expertise in leading cross-functional teams and ensuring project success.",48    image:49      "https://img.freepik.com/premium-photo/men-design-logo-avatar_665280-69424.jpg?ga=GA1.1.2123848024.1747422116&semt=ais_hybrid&w=740",50    socials: {51      linkedin: "https://linkedin.com/in/max-payne",52      github: "https://github.com/max-payne",53      twitter: "https://twitter.com/max_payne",54      mail: "max.payne@example.com",55    },56  },57  {58    id: 4,59    name: "Dave Wilson",60    role: "Backend Developer",61    bio: "Dave is a skilled backend developer with expertise in Node.js and Express.js. He has a passion for building scalable and secure server-side applications.",62    image:63      "https://img.freepik.com/premium-photo/men-design-logo-avatar_665280-69427.jpg?ga=GA1.1.2123848024.1747422116&semt=ais_hybrid&w=740",64    socials: {65      linkedin: "https://linkedin.com/in/dave-wilson",66      github: "https://github.com/dave-wilson",67      twitter: "https://twitter.com/dave_wilson",68      mail: "dave.wilson@example.com",69    },70  },71];72
73<TeamGallery teamMembers={TeamMembers} />;