Team Showcase

Heroes 396

About

Team Showcase A responsive and animated component to showcase team members or featured profiles in a visually engaging, overlapping card layout. It features staggered entrance animations for the cards and subtle hover effects.

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

Code

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

Usage.tsx

import { TeamShowcase, TeamMember } from "@/components/ui/team-showcase";

// Sample data for the demo
const developers: TeamMember[] = [
  {
    name: "ANNA DEAN",
    role: "React engineer",
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-WATlBiOtoeOqYDWnDEPanriLAznjm1.png&w=320&q=75",
    themeColor: "bg-[#F9D4D5]", // Light Pink
  },
  {
    name: "CHRIS MEZY",
    role: "Data engineer",
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-it2XL5AezhxG7WN3p4H9RCEHeT9QmS.png&w=320&q=75",
    themeColor: "bg-[#D1E5E6]", // Light Blue
  },
  {
    name: "LESLIE SCHNIDER",
    role: "Backend developer",
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-LLs9Xsn1aI6Y3OrY1OM6jwrLzoHfgU.png&w=320&q=75",
    themeColor: "bg-[#EAE1DA]", // Beige
  },
  {
    name: "JIM BRICKTON",
    role: "AI specialist",
    imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-wFE3oMCekBz2QDqsYZJoHqW80K9ruu.png&w=320&q=75",
    themeColor: "bg-[#FDEACC]", // Light Yellow
  },
];

export default function TeamShowcaseDemo() {
  return <TeamShowcase members={developers} />;
}