Installation

npx payload-components add testimonials-quote

What it installs

Copies 3 source files into your project:

src/blocks/shared/testimonialFields.tsshared
src/blocks/TestimonialsQuote/config.ts
src/blocks/TestimonialsQuote/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

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

quote, author, role, and avatar come from the shared Testimonials family base (src/blocks/shared/testimonialFields.ts), used here as a single featured testimonial.

Prop

Type

Usage

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

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

testimonials-quotecurrent

Testimonials QuoteA single featured testimonial: a quote with a left accent bar, author, optional role, and avatar.

testimonials-spotlight

Testimonials SpotlightA single centered testimonial with a quote-mark, large avatar, author, and role — a hero-style social-proof moment.

testimonials-grid

Testimonials GridA testimonials section: a heading above a responsive grid of quote cards, each with author, optional role, and avatar.

testimonials-rating

Testimonials RatingA testimonials section: a responsive grid of review cards, each with a star rating, quote, author, optional role, and avatar.

testimonials-bento

Testimonials BentoA testimonials bento: an asymmetric grid with one featured quote in a large cell and supporting quotes around it.

testimonials-wall

Testimonials WallA dense wall-of-love: a multi-column masonry of compact testimonial cards, each with author, optional role, and avatar.