Team Portrait Grid

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials 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/about68.tsx instead.

Usage

The file also exports about68Demo, 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 { About68, about68Demo } from "@/components/blocks/about/about68";

export default function Page() {
  return <About68 {...about68Demo} />;
}

Props

Types

type Portrait = {
  name: string;
  role: string;
  avatar?: { src: string; alt: string };
};

Behavior notes

• The eyebrow sits above a border-top rule rather than directly over the heading like About15's eyebrow, so the hairline reads as the start of a new section rather than as decoration attached to the heading text.
• heading and description sit side by side in a 2-column row instead of stacked in a single max-w-2xl block like About7's heading, giving the header itself the same two-column rhythm as the portrait grid below it.
• Cards use a 4-column grid at the lg breakpoint, one more column than About7's 3-column team card grid, and each card centers a larger size-20 avatar above the name and role instead of About7's left-aligned size-14 avatar with a bio paragraph.