Sections

Team Section

Team member grid with avatar, role, bio, and social links

Quick Preview

Meet the team

The people behind the product.

Sarah Johnson

CEO & Co-founder

Visionary leader with 15 years of experience building developer tools.

Alex Chen

Head of Engineering

Full-stack engineer passionate about scalable systems and open source.

Maya Patel

Lead Designer

Crafts beautiful, accessible interfaces that users love.

Carlos Rivera

Developer Advocate

Bridges the gap between product and community through clear communication.

Priya Nair

Product Manager

Turns user feedback into features that matter.

James Park

DevOps Engineer

Ensures zero-downtime deploys and rock-solid infrastructure.

Installation

// Copy the component from
src/components/sections/TeamSection.tsx

Usage

import { TeamSection } from '@/components/sections/TeamSection'

const members = [
  { name: 'Sarah Johnson', role: 'CEO', initials: 'SJ', bio: '15 years building dev tools.' },
  { name: 'Alex Chen',     role: 'CTO', initials: 'AC', bio: 'Open-source enthusiast.' },
]

<TeamSection title="Meet the team" members={members} columns={3} />

Variants

4 Columns

4-column grid

Meet the team

Sarah Johnson

CEO & Co-founder

Visionary leader with 15 years of experience building developer tools.

Alex Chen

Head of Engineering

Full-stack engineer passionate about scalable systems and open source.

Maya Patel

Lead Designer

Crafts beautiful, accessible interfaces that users love.

Carlos Rivera

Developer Advocate

Bridges the gap between product and community through clear communication.

Priya Nair

Product Manager

Turns user feedback into features that matter.

James Park

DevOps Engineer

Ensures zero-downtime deploys and rock-solid infrastructure.

2 Columns with bio

2-column grid with bio text

Meet the team

The people behind the product.

Sarah Johnson

CEO & Co-founder

Visionary leader with 15 years of experience building developer tools.

Alex Chen

Head of Engineering

Full-stack engineer passionate about scalable systems and open source.

Maya Patel

Lead Designer

Crafts beautiful, accessible interfaces that users love.

Carlos Rivera

Developer Advocate

Bridges the gap between product and community through clear communication.

Priya Nair

Product Manager

Turns user feedback into features that matter.

James Park

DevOps Engineer

Ensures zero-downtime deploys and rock-solid infrastructure.

With Social Links

const members = [
  {
    name: 'Alex Chen',
    role: 'Head of Engineering',
    initials: 'AC',
    twitter:  'https://x.com/alexchen',
    linkedin: 'https://linkedin.com/in/alexchen',
    github:   'https://github.com/alexchen',
  },
]

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a sections component named Team Section in React/Next.js.
Goal: recreate the same overall UI and behavior as the Team Section reference from a component gallery.
What it needs to communicate: Team member grid with avatar, role, bio, and social links.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Treat the result as a full-width section with strong layout rhythm and responsive spacing.
- Preserve headline hierarchy, supporting copy, and clear CTA emphasis.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- title: string — default "Meet the team" — Section heading
- subtitle: string — Section sub-heading
- members: TeamMember[] — Array of team member objects
- columns: 2 | 3 | 4 — default 3 — Number of columns in the grid
- className: string — Additional CSS classes

Reference usage patterns:
- No examples were documented. Infer a sensible default presentation and one richer usage example.

Feature expectations:
- Initials fallback avatar with colour rotation
- Optional image avatar support
- Social links (Twitter/X, LinkedIn, GitHub)
- 2 / 3 / 4 column grid
- Server Component

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`title`	`string`	`"Meet the team"`	Section heading
`subtitle`	`string`	-	Section sub-heading
`members`	`TeamMember[]`	-	Array of team member objects
`columns`	`2 \| 3 \| 4`	`3`	Number of columns in the grid
`className`	`string`	-	Additional CSS classes

Features

✓Initials fallback avatar with colour rotation
✓Optional image avatar support
✓Social links (Twitter/X, LinkedIn, GitHub)
✓2 / 3 / 4 column grid
✓Server Component