Page blocksTestimonials

Testimonials Rating

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

v0.2.0Page blockTestimonials familyTestimonials section

New in 0.2.0 Lists the block under the Testimonials heading in the admin Blocks Drawer (admin.group). Needs Payload 3.25 or newer.

Installation

npx payload-components add testimonials-rating

What it installs

Copies 3 source files into your project:

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

The eyebrow, title, and description heading fields come from the shared Testimonials family base (src/blocks/shared/testimonialFields.ts); the testimonials review grid is specific to this variant.

Prop

Type

Each item in testimonials carries a star rating plus the shared one-quote shape:

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the TestimonialsRating 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 (3.25 or newer) / v4 (experimental)
Next.js
15 / 16 with v316 (16.4 or newer) with v4
shadcn UI
badge

Payload v4 support is experimental: it needs Next.js 16 (16.4 or newer) and Node.js 24.22.1 or newer. Payload v3 (3.25 or newer) stays fully supported.

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-quote
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-ratingcurrent
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.

Testimonials Grid

A testimonials section — a heading above a responsive grid of quote cards, each with author, optional role, and avatar.

Testimonials Bento

A testimonials bento — an asymmetric grid with one featured quote in a large cell and supporting quotes around it, each with optional logo and avatar.