# Team 4

> team

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/team-4).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/team-4
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/team-4/light.png
- Registry item: https://blocks.cnippet.dev/r/team-4.json
- Categories: team
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/team-4.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: `@hugeicons/core-free-icons`, `@hugeicons/react`, `lucide-react`
- Registry items: `@cnippet/button`, `@cnippet/separator`, `@cnippet/utils`

## Files

### `registry/default/sections/team-4.tsx`

```tsx
//biome-ignore-all lint/suspicious/noArrayIndexKey:<>

"use client";

import {
  InstagramIcon,
  LinkedinIcon,
  TwitterIcon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const teamMembers = [
  {
    bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.",
    id: "1",
    image:
      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=800&fit=crop&crop=face",
    name: "William Blythe",
    role: "Compliance Officer",
  },
  {
    bio: "Passionate about creating intuitive user experiences and innovative design solutions.",
    id: "2",
    image:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=face",
    name: "Sarah Chen",
    role: "Lead Designer",
  },
  {
    bio: "Building scalable technology solutions that drive business growth and innovation.",
    id: "3",
    image:
      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=600&h=800&fit=crop&crop=face",
    name: "Marcus Johnson",
    role: "CTO",
  },
  {
    bio: "Strategic marketing expert with a focus on brand development and customer engagement.",
    id: "4",
    image:
      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&h=800&fit=crop&crop=face",
    name: "Elena Rodriguez",
    role: "Marketing Director",
  },
];

export function Team4() {
  const [currentIndex, setCurrentIndex] = React.useState(0);

  const goToPrevious = () => {
    setCurrentIndex((prev) => (prev === 0 ? teamMembers.length - 1 : prev - 1));
  };

  const goToNext = () => {
    setCurrentIndex((prev) => (prev === teamMembers.length - 1 ? 0 : prev + 1));
  };

  const currentMember = teamMembers[currentIndex];

  return (
    <section className="w-full bg-white py-16 md:py-24">
      <div className="mx-auto w-full max-w-6xl px-6">
        <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
          {/* Left - Content */}
          <div>
            {/* Header */}
            <div className="mb-16">
              <span className="mb-4 block font-semibold text-neutral-400 text-xs uppercase tracking-wider">
                CAPTION HERE
              </span>
              <h2 className="mb-6 font-normal text-3xl text-gray-900 md:text-4xl lg:text-5xl dark:text-gray-100">
                Meet our team
              </h2>
              <p className="max-w-md text-gray-600 dark:text-gray-400">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor.
              </p>
            </div>

            {/* Member Info */}
            <div className="mb-8">
              <h3 className="mb-1 font-bold text-2xl text-gray-900 dark:text-gray-100">
                {currentMember.name}
              </h3>
              <p className="mb-4 text-gray-600 dark:text-gray-400">
                {currentMember.role}
              </p>
              <p className="text-gray-600 dark:text-gray-400">
                {currentMember.bio}
              </p>
            </div>

            {/* Social Links */}
            <Separator className="mb-6" />
            <div className="mb-8 flex gap-4">
              <Button
                className="h-9 w-9 rounded-full text-neutral-400 hover:text-gray-600 dark:text-gray-400"
                size="icon"
                variant="ghost"
              >
                <HugeiconsIcon
                  className="size-5 text-code-foreground sm:size-4"
                  icon={InstagramIcon}
                  strokeWidth={2}
                />
                {/* <Instagram className="h-5 w-5" /> */}
              </Button>
              <Button
                className="h-9 w-9 rounded-full text-neutral-400 hover:text-gray-600 dark:text-gray-400"
                size="icon"
                variant="ghost"
              >
                <HugeiconsIcon
                  className="size-5 text-code-foreground sm:size-4"
                  icon={LinkedinIcon}
                  strokeWidth={2}
                />
                {/* <Linkedin className="h-5 w-5" /> */}
              </Button>
              <Button
                className="h-9 w-9 rounded-full text-neutral-400 hover:text-gray-600 dark:text-gray-400"
                size="icon"
                variant="ghost"
              >
                <HugeiconsIcon
                  className="size-5 text-code-foreground sm:size-4"
                  icon={TwitterIcon}
                  strokeWidth={2}
                />
                {/* <Twitter className="h-5 w-5" /> */}
              </Button>
            </div>

            {/* Navigation Arrows */}
            <div className="flex gap-2">
              <Button
                className="h-12 w-12 rounded-full border-gray-200 text-neutral-400 hover:text-gray-900 disabled:opacity-30 dark:border-neutral-700 dark:text-gray-100"
                disabled={currentIndex === 0}
                onClick={goToPrevious}
                size="icon"
                variant="outline"
              >
                <ChevronLeft className="h-5 w-5" />
              </Button>
              <Button
                className="h-12 w-12 rounded-full border-gray-200 text-gray-900 hover:bg-neutral-100 dark:border-neutral-700 dark:text-gray-100"
                onClick={goToNext}
                size="icon"
                variant="outline"
              >
                <ChevronRight className="h-5 w-5" />
              </Button>
            </div>
          </div>

          {/* Right - Photo */}
          <div className="relative">
            <div className="relative overflow-hidden rounded-3xl border border-gray-200 dark:border-neutral-700">
              <img
                alt={currentMember.name}
                className="h-125 w-full object-cover grayscale transition-all duration-500 md:h-150"
                src={currentMember.image}
              />
            </div>

            {/* Slide Indicators */}
            <div className="absolute -bottom-8 left-1/2 flex -translate-x-1/2 gap-2">
              {teamMembers.map((_, index) => (
                <button
                  className={cn(
                    "h-2 w-2 rounded-full transition-all",
                    index === currentIndex
                      ? "w-6 bg-neutral-900"
                      : "bg-neutral-300 hover:bg-neutral-400",
                  )}
                  key={index}
                  onClick={() => setCurrentIndex(index)}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Team4;
```