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

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: v3
Next.js: 15 / 16
shadcn UI: badge

Your project must already expose components.json, src/payload.config.ts, src/blocks/RenderBlocks.tsx, src/collections/Pages/index.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

pricing-cards

Pricing CardsA three-up pricing table of editable plan cards — price, period, feature list, and CTA — with one plan highlighted in emerald.

pricing-cards-muted

Pricing Cards MutedThe three-up pricing table on soft muted card surfaces, with one plan highlighted in emerald.

pricing-cards-cta

Pricing Cards CTAThe three-up pricing table with the call-to-action button placed inside each plan header.

pricing-splitcurrent

Pricing SplitA two-plan split pricing layout — a compact entry plan beside an expanded featured plan with its full feature list.

pricing-enterprise

Pricing EnterpriseA single wide enterprise pricing panel: price and CTA beside an included-features list and an editable wall of trust logos.