Installation

npx payload-components add contact-channels

What it installs

Copies 5 source files into your project:

src/blocks/shared/safeUrls.tsshared
src/blocks/shared/contactUrls.ts
src/blocks/shared/contactFields.ts
src/blocks/ContactChannels/config.ts
src/blocks/ContactChannels/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`

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

safeUrls.ts is the shared field core for this family — every variant composes it. Editing it updates each installed block at once, and re-running an install never overwrites a copy you have changed.

Re-running the install converges: it detects existing wiring, skips it, and records install state in .payload-components/state.json.

Content model

eyebrow, title, description, and the per-channel shape come from the shared contact base at src/blocks/shared/contactFields.ts, so a channel validates and renders the same way in every contact variant. Use this block when the form lives elsewhere — a dedicated contact route, a Payload form-builder page, or a scheduling tool — and the page only needs to route people.

Each channel's value is validated on save: an email must parse as an address, a phone must be 7–15 digits, and a url must be an HTTPS URL or a same-origin path. A value that would not resolve to a safe href is rejected in the admin, and the renderer falls back to plain text rather than emitting a dead link.

Prop

Type

Each item in channels carries:

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the ContactChannels 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
Next.js: 15 / 16
shadcn UI: badge

Your project must already expose components.json, src/payload.config.ts — the surfaces payload-components add patches. The CLI verifies this against the support matrix before touching anything.

In this family

contact-routing-form

Contact Routing FormA contact section with validated channels and a fixed accessible form that posts to a same-origin endpoint.

contact-channelscurrent

Contact ChannelsA form-free contact section: heading, supporting copy, and a grid of validated email, phone, and URL channels.