Stats Card
A centred heading above one divided panel that splits metrics into equal columns.
New in 0.1.1 Version the current component and shared source, including explicit localization semantics where applicable.
Installation
npx payload-components add stats-cardWhat it installs
Copies 3 source files into your project:
src/blocks/shared/statsFields.tssharedsrc/blocks/StatsCard/config.tssrc/blocks/StatsCard/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.jsstatsFields.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
eyebrow and title come from the shared statsFields base that every Stats variant spreads;
metrics is specific to this variant. The panel distributes its columns evenly from the row count,
so two, three, or four metrics all stay balanced without a layout setting.
Prop
Type
Each item in metrics carries:
Prop
Type
Usage
StatsCard block to its layout.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
stats-proofstats-gridstats-cardcurrentstats-inline