ComponentsSite blocks

Testimonials

Customer voices — agency references, Google reviews for a spa or a restaurant, SaaS quotes. figure > blockquote + figcaption with locale quotation marks; no avatar means name only (never an initials circle); star ratings appear only with a named source. The carousel is a ~1 KB scroll-snap island with arrows and a “3 / 8” counter, never autoplaying.

CSS scroll-snap (carousel) blocks/site/testimonials.tsx, blocks/site/shared/testimonials-carousel.tsx, blocks/site/registry-2.ts, styles/blocks.csstheme · material · accent · density · font

We used to lose half our Friday bookings to missed calls. The new booking page and WhatsApp reminders brought no-shows down from one in five to one in twenty within a season.

Deniz ArslanChef-owner · Kıyı MeyhaneKıyı Meyhane

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Testimonials } from "@vamos-ui/react/blocks";

<Testimonials
  variant="reviews"
  title="What guests *say*"
  summary={{ rating: 4.8, count: 1240, source: "google", link: { href: "https://g.page/r/…", label: "Read all reviews" } }}
  items={[{ quote: "The lakerda alone is worth the booking.", author: "Murat Ç.", rating: 5, source: "google", date: "2026-11-02" }]}
/>

Examples

Wall (agency references)

CSS columns, hairline rules, uneven lengths. Only the item with a source shows stars.

References

Clients, in their own words

  • They rebuilt our booking flow in three weeks. Table requests through the site doubled before the summer season even started.

    Deniz ArslanDeniz ArslanOwner · Kıyı Meyhane

  • Clear prices, a calm site, and we can change the treatment menu ourselves.

    Melis AydınManager · Hamam Moda

  • Google

    The clinic pages finally rank for our own neighbourhood. Patients mention finding us on Google Maps.

    Dr. Selin ÖztürkDefne Clinic

  • Honest about what wouldn’t work, which is rarer than it should be.

    Can DemirCan DemirFounder · Ledgerly

  • Our Google Ads spend went down by a third and calls went up. The monthly report is two pages and I actually read it.

    Kerem YıldızPartner · Yıldız Hukuk

  • Launch day was boring, in the best way.

    Ayşe KayaMarketing lead · Moda Pilates

Reviews (restaurant, Google)

Sticky rating summary beside a dated list. Reviews are imported into props — the kit never calls the Places API.

Reviews

What guests say

4.8

4.8 on Google — 1,240 reviews

Read all reviews (opens in a new tab)

  1. Google

    The lakerda alone is worth the booking. Ask for a table by the window around sunset.

    Murat Ç.

  2. Google

    Great fish, attentive service, slightly loud after ten on Saturdays.

    Elena R.

  3. Google

    We booked the upstairs room for twelve. Set menu was generous and they handled two allergies without fuss.

    Selin Y.

  4. Tripadvisor

    Proper meyhane, proper prices. The rakı list is long; let them recommend.

    Thomas B.

API

Testimonials

PropTypeDefault
variant
Layout (see examples).
"feature" | "wall" | "carousel" | "reviews""feature"
items
{ quote, author, role?, company?, avatar?, logo?, rating?, source?, date?, link? } — 1–24.
TestimonialItem[]—
summary
reviews variant: “4.8 on Google — 1,240 reviews”.
{ rating; count; source; link? }—
eyebrow / title / lead
Section header (beside the arrows in carousel, sticky in reviews).
ReactNode—
labels
quoteOpen / quoteClose (locale marks), ratingOutOf, counters, Previous / Next.
Partial<Site2Labels>—
locale
Dates and numbers through Intl.
string"en-US"
theme / anchor / id / className / headingLevel / components / editMode
Shared block props.
BlockBaseProps—

RatingStars

PropTypeDefault
rating / label
Monochrome stars with role=img and a text alternative (“4.8 out of 5”).
number / string—
Previous
Team
Next
Time picker