Payload Logo
Live components gallery

Browse the real kits that ship in the current alpha.

This route renders the actual shipped block components with typed preset data. Use it to inspect what `payload-kit add` installs today before touching a repo.

Shipped alpha
hero-basic

Hero Basic

A headline-first hero block with proof items and CTA support, shipped through the real payload-kit alpha flow.

Install command

npx payload-kit add hero-basic

Marketing hero

A headline-first section with CTA support and a proof ribbon for install confidence.

Payload Kits alpha

Ship a production-ready hero without manual repo cleanup.

Install the first public kit and land a complete hero block with typed props, schema wiring, and import-map-safe output.

Registry-backed install
Payload-aware wiring
Types generated automatically
Shipped alpha
feature-grid-basic

Feature Grid Basic

A text-first feature grid for product and agency landing pages, installed through the same real alpha workflow.

Install command

npx payload-kit add feature-grid-basic

Product features

A product-facing grid with three editor-friendly items and one CTA.

Product features

Show the product layer with a feature grid that belongs in the repo immediately.

The second shipped alpha kit gives teams a structured feature section without adding new primitives or manual layout glue.

Real install surface

Adds the block files, layout registration, and render wiring through the real alpha install path.

Text-first schema

Keeps the content model intentionally small so editors get useful structure without extra ceremony.

Post-install cleanup handled

Finishes with generated types and import-map updates instead of leaving fragile manual steps behind.

Current alpha boundary

`payload-kit add` is real. `init` and `doctor` still follow.

The shipped surface today is the two public kits above. The next engineering tranche returns to `payload-kit doctor`, not a third kit.

/components