Page blocksIntegration

Integration List

A vertical list of integration rows — logo, name, description, and an add action — installed as a wired Payload block.

v0.2.0Page blockIntegration familyIntegration section

New in 0.2.0 Lists the block under the Integration heading in the admin Blocks Drawer (admin.group). Needs Payload 3.25 or newer.

Installation

npx payload-components add integration-list

What it installs

Copies 3 source files into your project:

  • src/blocks/shared/integrationFields.tsshared
  • src/blocks/IntegrationList/config.ts
  • src/blocks/IntegrationList/Component.tsx

…and makes 4 edits to wire the block into your project:

Registers the blocksrc/collections/Pages/index.ts
Maps the renderersrc/blocks/RenderBlocks.tsx
Regenerates typessrc/payload-types.ts
Regenerates the admin import mapsrc/app/(payload)/admin/importMap.js
integrationFields.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

heading, subtext, and integrations come from the shared integrationFields base. Each row renders the per-item description and, when set, links its add action to href.

Prop

Type

Each item in integrations carries:

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the IntegrationList block to its layout.
Fill the content. Complete the fields from the content model above — the component ships sample content you can start from.
Publish. Save and publish the page; the block renders through 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
none

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