Team Member Grid

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/about/about60.tsx instead.

Usage

The file also exports about60Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { About60, about60Demo } from "@/components/blocks/about/about60";

export default function Page() {
  return <About60 {...about60Demo} />;
}

Props

Types

type TeamMember = {
  name: string;
  role: string;
  photo?: { src: string; alt: string };
};

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• Each team card uses MediaSlot in a tall 3:4 portrait frame rather than a circular Avatar, unlike About1 and About7 which show team members as round avatar images, so a member without a photo falls back to MediaSlot's gradient placeholder instead of initials.
• The header (eyebrow, heading, description, buttons) is capped at max-w-2xl and left-aligned above a full-width grid below it, the same header/grid split as About7, but About7 has no CTA buttons in its header.
• The grid steps up to four columns at the lg breakpoint, wider than About1's and About7's two- and three-column team grids, since portrait cards are narrower than avatar-and-text rows.