Comparator Table

A tiered feature-comparison table — plan columns with CTAs over grouped feature rows whose cells are checkmarks or text values.

v0.1.1Page blockComparator familyComparison table

New in 0.1.1 Version the current component and shared source, including explicit localization semantics where applicable.

Installation

npx payload-components add comparator-table

What it installs

Copies 3 source files into your project:

  • src/blocks/shared/comparatorFields.tsshared
  • src/blocks/ComparatorTable/config.ts
  • src/blocks/ComparatorTable/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
comparatorFields.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

title and description come from the shared Comparator family base (src/blocks/shared/comparatorFields.ts); the plans columns and the features matrix are specific to this variant. Each feature row holds one values cell per plan, in the same order as plans — keep the two aligned.

Prop

Type

Each item in plans carries:

Prop

Type

Each item in features carries:

Prop

Type

Usage

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

In this family

comparator-tablecurrent
Comparator TableA tiered feature-comparison table: plan columns with CTAs over grouped feature rows of checkmarks or text values.
comparator-grid
Comparator GridA plan-column comparison card: pricing columns over a feature matrix, with a highlighted column and per-plan CTAs.
comparator-stack
Comparator StackA stacked plan-card comparison: one card per plan with its own price, CTA, and feature checklist.