Team Sections

Team sections introduce the people behind your product. These components range from dense compact lists for large teams to rich leadership bios with full-length descriptions.

Component Variants

Team Grid

• 

  Maya Chen

  Chief Executive Officer

  Leads company strategy and vision, previously scaled two developer-tooling startups.
• 

  Jordan Reyes

  Chief Technology Officer

  Oversees engineering and platform architecture across the entire product suite.
• 

  Priya Nair

  Head of Design

  Sets the design direction and maintains the component library design system.
• 

  Leo Fischer

  Head of Product

  Drives roadmap and works closely with customers to prioritize new features.

Team Cards

Maya Chen

Chief Executive Officer

Leads company strategy and vision, previously scaled two developer-tooling startups.

Jordan Reyes

Chief Technology Officer

Oversees engineering and platform architecture across the entire product suite.

Priya Nair

Head of Design

Sets the design direction and maintains the component library design system.

Leo Fischer

Head of Product

Drives roadmap and works closely with customers to prioritize new features.

Team Compact

• 

  Ava Thompson

  Frontend Engineer

• 

  Noah Kim

  Backend Engineer

• 

  Sofia Rossi

  Product Designer

• 

  Liam Walker

  DevOps Engineer

• 

  Emma Dubois

  QA Engineer

• 

  Ethan Novak

  Data Engineer

• 

  Mia Andersson

  Technical Writer

• 

  Lucas Silva

  Support Engineer

Team With Bio

Maya Chen

Chief Executive Officer

Maya co-founded the company after leading engineering teams at two developer-tooling startups through acquisition. She is focused on building a product that developers genuinely enjoy using, and spends much of her time talking directly with customers about what is and is not working.

Jordan Reyes

Chief Technology Officer

Jordan has spent over a decade building large-scale distributed systems. He leads the engineering organization with an emphasis on pragmatic architecture, developer velocity, and never shipping a feature without a plan for how to operate it in production.

Usage

import {
  TeamGrid,
  TeamCards,
  TeamCompact,
  TeamWithBio,
  type TeamMember,
} from '@/components/ui/team';

const members: TeamMember[] = [
  {
    name: 'Maya Chen',
    role: 'Chief Executive Officer',
    bio: 'Leads company strategy and vision.',
    photo: '/team/maya.jpg',
    social: [
      { icon: <TwitterIcon />, href: '#', label: 'Maya on X (Twitter)' },
      { icon: <LinkedinIcon />, href: '#', label: 'Maya on LinkedIn' },
    ],
  },
];

// Photo, name, role, short bio, and social links in a grid
<TeamGrid members={members} columns={4} /> // 2 | 3 | 4

// Card style with a larger photo
<TeamCards members={members} columns={3} /> // 2 | 3 | 4

// Small circular avatars in a dense list, ideal for large teams
<TeamCompact members={members} columns={4} /> // 2 | 3 | 4

// Alternating large image + long bio rows, for leadership pages
<TeamWithBio members={members} />

Props Reference

TeamMember

TeamSocialLink

TeamGrid

TeamCards

TeamCompact

TeamWithBio