React Team Grid

Copy Page

In deep tech, the team page does real work: a buyer evaluating a young vendor wants to know the people behind the silicon have shipped it before. Cards stay scannable; the credentials that actually persuade live one click in.

Installation

Props

Consecutive members sharing a group fall under one heading — "Leadership" and "Advisors" in the demo — so you can mix cohorts in a single grid without splitting the component.

Avatars that work before the photoshoot

imageUrl is optional and the fallback is a deterministic initials tile, not a placeholder service. Two reasons: a team page shouldn't block on scheduling headshots, and an external avatar service is a third-party request on a page that often loads before consent. Initials come from the first two whitespace-separated parts of name, uppercased — no locale-dependent transforms, so server and client agree.

credentials is the field that earns the click. Prior companies, degrees, and named standards work do more for a technical buyer than a paragraph of personality, which is why they render as a scannable list rather than being buried in bio. The modal closes on backdrop click or Escape and is marked role="dialog" with aria-modal.