# Team section 01

> A clean team showcase featuring a responsive 4-column grid layout with member cards, social media links, and hover effects. Perfect for displaying team members with their photos, names, roles, and social connections.

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/team-section-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/team-section-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/team-section-01-light-85df6683495ede98.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/team-section-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/team-section-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`, `separator`

## Files

### `src/registry/new-york/blocks/marketing-ui/team-section/team-section-01/page.tsx`

```tsx
import Team from '@/registry/new-york/components/blocks/team-section-01/team-section-01'

const teamMembers = [
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/team/image-1.png',
    alt: 'Phillip Bothman',
    name: 'Phillip Bothman',
    role: 'Founder & CEO',
    description: 'A visionary leader driving innovation and collaboration.',
    socialLinks: {
      facebook: '#',
      twitter: '#',
      github: '#',
      instagram: '#'
    }
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/team/image-2.png',
    alt: 'James Kenter',
    name: 'James Kenter',
    role: 'Engineering Manager',
    description: 'Leading teams to build smart, scalable solutions.',
    socialLinks: {
      facebook: '#',
      twitter: '#',
      github: '#',
      instagram: '#'
    }
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/team/image-3.png',
    alt: 'Cristofer Kenter',
    name: 'Cristofer Kenter',
    role: 'Product Designer',
    description: 'Crafting intuitive and engaging user experiences.',
    socialLinks: {
      facebook: '#',
      twitter: '#',
      github: '#',
      instagram: '#'
    }
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/team/image-4.png',
    alt: 'Alena Lubin',
    name: 'Alena Lubin',
    role: 'Frontend Developer',
    description: 'Bringing designs to life with seamless interfaces.',
    socialLinks: {
      facebook: '#',
      twitter: '#',
      github: '#',
      instagram: '#'
    }
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/team/image-8.png',
    alt: 'Jayden Lipshultz',
    name: 'Jayden Lipshultz',
    role: 'Sales Lead',
    description: 'Driving business growth and strong client relationships.',
    socialLinks: {
      facebook: '#',
      twitter: '#',
      github: '#',
      instagram: '#'
    }
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/team/image-7.png',
    alt: 'Maria Donin',
    name: 'Maria Donin',
    role: 'Product Manager',
    description: 'Bridging business needs with impactful solutions.',
    socialLinks: {
      facebook: '#',
      twitter: '#',
      github: '#',
      instagram: '#'
    }
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/team/image-6.png',
    alt: 'Carter Saris',
    name: 'Carter Saris',
    role: 'UX Researcher',
    description: 'Uncovering insights to enhance user experiences.',
    socialLinks: {
      facebook: '#',
      twitter: '#',
      github: '#',
      instagram: '#'
    }
  },
  {
    image: 'https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/team/image-5.png',
    alt: 'Ahmad Donin',
    name: 'Ahmad Donin',
    role: 'Customer Success',
    description: 'Ensuring customer satisfaction and long-term success.',
    socialLinks: {
      facebook: '#',
      twitter: '#',
      github: '#',
      instagram: '#'
    }
  }
]

const TeamPage = () => {
  return <Team teamMembers={teamMembers} />
}

export default TeamPage
```

### `src/assets/svg/facebook-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const FacebookIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'></path>
    </svg>
  )
}

export default FacebookIcon
```

### `src/assets/svg/github-icon.tsx`

```tsx
// React Imports
import type { SVGProps } from 'react'

const GithubIcon = (props: SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <path d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'></path>
      <path d='M9 18c-4.51 2-5-2-7-2'></path>
    </svg>
  )
}

export default GithubIcon
```

### `src/assets/svg/instagram-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const InstagramIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <rect width='20' height='20' x='2' y='2' rx='5' ry='5'></rect>
      <path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'></path>
      <line x1='17.5' x2='17.51' y1='6.5' y2='6.5'></line>
    </svg>
  )
}

export default InstagramIcon
```

### `src/assets/svg/twitter-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const TwitterIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <path d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z'></path>
    </svg>
  )
}

export default TwitterIcon
```

### `src/registry/new-york/components/blocks/team-section-01/team-section-01.tsx`

```tsx
import { Card, CardContent, CardTitle } from '@/registry/new-york/ui/card'
import { Separator } from '@/registry/new-york/ui/separator'

import FacebookIcon from '@/assets/svg/facebook-icon'
import GithubIcon from '@/assets/svg/github-icon'
import InstagramIcon from '@/assets/svg/instagram-icon'
import TwitterIcon from '@/assets/svg/twitter-icon'

type TeamMember = {
  image: string
  alt: string
  name: string
  role: string
  description: string
  socialLinks: {
    facebook: string
    twitter: string
    github: string
    instagram: string
  }
}[]

const Team = ({ teamMembers }: { teamMembers: TeamMember }) => {
  return (
    <section className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        <div className='mb-12 text-center sm:mb-16 lg:mb-24'>
          <h2 className='mb-4 text-2xl font-semibold md:text-3xl lg:text-4xl'>Get to Know Our Amazing Team</h2>
          <p className='text-muted-foreground text-xl'>
            Meet the Passionate Experts Behind Our Success and Learn More About Their Roles.
          </p>
        </div>

        {/* Team Members */}
        <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-y-10 xl:grid-cols-4'>
          {teamMembers.map((member, index) => (
            <Card
              key={index}
              className='hover:border-primary overflow-hidden py-0 shadow-none transition-colors duration-300'
            >
              <CardContent className='px-0'>
                <div className='bg-muted pt-10'>
                  <img src={member.image} alt={member.alt} className='mx-auto h-60 w-auto' />
                </div>
                <div className='space-y-3 p-6'>
                  <CardTitle className='text-lg'>{member.name}</CardTitle>
                  <Separator />
                  <div className='text-muted-foreground'>
                    <p className='mb-1 font-medium'>{member.role}</p>
                    <p>{member.description}</p>
                  </div>
                  <div className='flex gap-3'>
                    <a href={member.socialLinks.facebook}>
                      <FacebookIcon className='size-5' />
                    </a>
                    <a href={member.socialLinks.twitter}>
                      <TwitterIcon className='size-5' />
                    </a>
                    <a href={member.socialLinks.github}>
                      <GithubIcon className='size-5' />
                    </a>
                    <a href={member.socialLinks.instagram}>
                      <InstagramIcon className='size-5' />
                    </a>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Team
```