Installation

npx payload-components add footer-columns

What it installs

Copies 5 source files into your project:

src/blocks/shared/safeUrls.tsshared
src/blocks/shared/footerUrls.ts
src/blocks/shared/footerFields.ts
src/blocks/FooterColumns/config.ts
src/blocks/FooterColumns/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

logo, brandLabel, and copyright come from the shared footerFields base that every Footer variant spreads; tagline and groups are specific to this variant. Each group renders as its own labelled navigation region, so the group name is both the visible column heading and the accessible name for that set of links.

Prop

Type

Each item in groups carries:

Prop

Type

Each item in links carries:

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the FooterColumns 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.

Footer blocks render inside the Pages layout like every other block. To use one as site-wide chrome instead, render the component directly in your root layout and pass it content from a global.

Requirements

Target: payload-website-starter, payload-blocks-app
Payload: v3
Next.js: 15 / 16
shadcn UI: none

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.

Layout adapted from tailark/blocks (MIT), retokenized onto the Payload Components design system.

In this family

footer-columnscurrent

Footer ColumnsA brand block beside labelled columns of navigation links, closed by a copyright rule.

footer-simple

Footer SimpleA compact footer keeping the brand and one wrapped row of links on a line, copyright beneath.

footer-centered

Footer CenteredA centred brand, tagline, and navigation above a rule carrying copyright and policy links.