Installation

npx payload-components add pricing-split

What it installs

Copies 3 source files into your project:

src/blocks/shared/pricingFields.tsshared
src/blocks/PricingSplit/config.ts
src/blocks/PricingSplit/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

pricingFields.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.

The first three fields come from the shared pricingFields base; plans is built from the shared planFields. This variant expects exactly two plans: the first renders as the compact entry column on the left, the second as the expanded panel on the right (mark it featured for the emerald "Popular" badge).

Prop

Type

Each item in plans carries:

Prop

Type

Usage

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

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