Stats Proof
A proof section pairing narrative, prominent string metrics, and a semantic customer quote.
Installation
npx payload-components add stats-proofWhat it installs
Copies 2 source files into your project:
src/blocks/StatsProof/config.tssrc/blocks/StatsProof/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 |
src/collections/Pages/index.tssrc/blocks/RenderBlocks.tsxsrc/payload-types.tssrc/app/(payload)/admin/importMap.jsRe-running the install converges: it detects existing wiring, skips it, and records install state in .payload-components/state.json.
Content model
This standalone Stats block keeps metric values as strings, so editors can enter percentages, signed values, counts, or abbreviated totals without formatting logic.
Prop
Type
Each item in metrics carries:
Prop
Type
Usage
StatsProof block to its layout.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.