Team grid
The people behind the product: a photo or initials, name, role and an optional line each, in three or four columns.
npx prodular-ui add team-gridEight people
The first two link to a profile.
- PRPriya RamanHead of financeOur first customer. Closes our own books on Relay.
- HSHana SatoDesign lead
- DFDaniel FerreiraEngineering lead
- MBMarco BianchiCustomer success
- RARuth AchebeSecurity
- KMKofi MensahEngineering
import { TeamGrid } from "@/components/ui/team-grid"
export default function TeamGridDemo() { return ( <div className="w-full max-w-4xl py-6"> <TeamGrid members={[ { name: "Ines Duarte", role: "Co-founder, CEO", initials: "ID", bio: "Ran collections for 9 years before writing a line of spec.", href: "#" }, { name: "Theo Lindqvist", role: "Co-founder, CTO", initials: "TL", bio: "Built the first ledger sync on a train.", href: "#" }, { name: "Priya Raman", role: "Head of finance", initials: "PR", bio: "Our first customer. Closes our own books on Relay." }, { name: "Hana Sato", role: "Design lead", initials: "HS" }, { name: "Daniel Ferreira", role: "Engineering lead", initials: "DF" }, { name: "Marco Bianchi", role: "Customer success", initials: "MB" }, { name: "Ruth Achebe", role: "Security", initials: "RA" }, { name: "Kofi Mensah", role: "Engineering", initials: "KM" }, ]} /> </div> )}Anatomy
<Section> <TeamGrid members={team} /></Section>Guidance
Use it when
- On about and careers pages.
- A line about each person for the founders and leads.
Avoid
- Stock photos. Initials are better than a fake face.
- Job titles nobody outside the company understands.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Give every photo the same crop and background.
- columns 3 for teams of six or nine.
API
TeamGrid
| Prop | Type | Default | Description |
|---|---|---|---|
| members | { name, role, initials?, photo?, bio?, href? }[] | The people, in the order shown. | |
| columns | 3 | 4 | 4 | Columns on wide screens. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add team-grid# or, with the registry in components.jsonnpx shadcn@latest add @prodular/team-grid