How do I use Team Member in my project?

Copy the TeamMemberCard source code from https://opensourceui.in/components/team-member, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Team Member in a commercial project?

Yes. Opensource UI is MIT licensed. You can use TeamMemberCard in personal and commercial projects without UI attribution.

Back to Users

Components / Users

Team Member

Name: Opensource UI
Author: Bidyut Kundu

Full-bleed portrait card — hover reveals GitHub and mail buttons, role, name, and bio. About pages without the generic card grid.

Preview

Lead Engineer

Bidyut Kundu

Building design tools that developers love. Previously at Stripe.

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/users/team-member-card.tsx in your project.
4
Import and render:
Example
import { TeamMemberCard } from "@/components/users/team-member-card";
<TeamMemberCard />

lib/cn.ts

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

components/users/team-member-card.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { forwardRef } from "react";
import Image from "next/image";
import { cn } from "@/lib/cn";
import { Github } from "@/icons/brands/github";
import { Mail } from "lucide-react";
 
export const TeamMemberCard = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className = "", ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "group relative h-72 w-56 cursor-pointer overflow-hidden rounded-2xl",
      className,
    )}
    {...props}
  >
    <Image
      src="/profile-picture.png"
      alt="Team member"
      fill
      sizes="224px"
      className="object-cover transition-transform duration-700 group-hover:scale-110"
    />
    <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent" />
 
    <div className="absolute top-3 right-3 flex translate-y-1 gap-1.5 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
      <button className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg border border-white/30 bg-white/20 text-white backdrop-blur-md transition-colors hover:bg-white/30">
        <Github size={13} />
      </button>
      <button className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg border border-white/30 bg-white/20 text-white backdrop-blur-md transition-colors hover:bg-white/30">
        <Mail size={13} />
      </button>
    </div>
 
    <div className="absolute right-0 bottom-0 left-0 p-4">
      <p className="mb-1 font-mono text-[10px] tracking-widest text-white/50 uppercase">
        Lead Engineer
      </p>
      <h3 className="text-lg leading-tight font-semibold text-white">
        Bidyut Kundu
      </h3>
      <p className="mt-1.5 translate-y-2 text-xs leading-relaxed text-white/60 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
        Building design tools that developers love. Previously at Stripe.
      </p>
    </div>
  </div>
));
TeamMemberCard.displayName = "TeamMemberCard";

import React, { forwardRef } from "react"; import Image from "next/image"; import { cn } from "@/lib/cn"; import { Github } from "@/icons/brands/github"; import { Mail } from "lucide-react"; export const TeamMemberCard = forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({ className = "", ...props }, ref) => ( <div ref={ref} className={cn( "group relative h-72 w-56 cursor-pointer overflow-hidden rounded-2xl", className, )} {...props} > <Image src="/profile-picture.png" alt="Team member" fill sizes="224px" className="object-cover transition-transform duration-700 group-hover:scale-110" /> <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent" /> <div className="absolute top-3 right-3 flex translate-y-1 gap-1.5 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"> <button className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg border border-white/30 bg-white/20 text-white backdrop-blur-md transition-colors hover:bg-white/30"> <Github size={13} /> </button> <button className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg border border-white/30 bg-white/20 text-white backdrop-blur-md transition-colors hover:bg-white/30"> <Mail size={13} /> </button> </div> <div className="absolute right-0 bottom-0 left-0 p-4"> <p className="mb-1 font-mono text-[10px] tracking-widest text-white/50 uppercase"> Lead Engineer </p> <h3 className="text-lg leading-tight font-semibold text-white"> Bidyut Kundu </h3> <p className="mt-1.5 translate-y-2 text-xs leading-relaxed text-white/60 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"> Building design tools that developers love. Previously at Stripe. </p> </div> </div> )); TeamMemberCard.displayName = "TeamMemberCard";