Team Grid
A team section with a heading, intro, and a responsive grid of member photo cards that reveal role on hover.
New in 0.2.0 Lists the block under the Team heading in the admin Blocks Drawer (admin.group). Needs Payload 3.25 or newer.
Installation
npx payload-components add team-gridWhat it installs
Copies 3 source files into your project:
src/blocks/shared/teamFields.tssharedsrc/blocks/TeamGrid/config.tssrc/blocks/TeamGrid/Component.tsx
…and makes 4 edits to wire the block into your project:
| Registers the block | src/collections/Pages/index.ts |
| Maps the renderer | src/blocks/RenderBlocks.tsx |
| Regenerates types | src/payload-types.ts |
| Regenerates the admin import map | src/app/(payload)/admin/importMap.js |
src/collections/Pages/index.tssrc/blocks/RenderBlocks.tsxsrc/payload-types.tssrc/app/(payload)/admin/importMap.jsteamFields.ts is shared source for this component family. Components that install the same path reuse that local copy, and re-running an install never overwrites a copy you have changed.Re-running the CLI install detects existing source and wiring, then records install state in .payload-components/state.json.
Content model
The eyebrow and title fields come from the shared Team family base
(src/blocks/shared/teamFields.ts); the description intro and the members grid are
specific to this variant.
Prop
Type
Each item in members carries:
Prop
Type
Usage
TeamGrid block to its layout.RenderBlocks on the frontend, fully typed — no extra wiring.Requirements
- Target
- payload-website-starter, payload-blocks-app
- Payload
- v3 (3.25 or newer) / v4 (experimental)
- Next.js
- 15 / 16 with v316 (16.4 or newer) with v4
- shadcn UI
- badge
Payload v4 support is experimental: it needs Next.js 16 (16.4 or newer) and Node.js 24.22.1 or newer. Payload v3 (3.25 or newer) stays fully supported.
Your project must already expose components.json, src/payload.config.ts — the surfaces patched by payload-components add. The CLI verifies this against the support matrix before touching anything.
In this family
team-rosterteam-gridcurrentteam-bios