Testimonials

Code

import { TestimonialForm, TestimonialWall } from "@fadymondy/nasaq/web";export const Page = ({ items }: { items: React.ComponentProps<typeof TestimonialWall>["items"] }) => (  <>    <TestimonialWall items={items} layout="wall" />    <TestimonialForm onSubmit={(s) => fetch("/api/testimonials", { method: "POST", body: JSON.stringify(s) })} />  </>);

Website · beta

Live examples and controls: Testimonials in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/testimonials.json

Two pieces. TestimonialForm collects a testimonial from a customer: name, optional role and company, a star rating, their words, consent to publish, and a hidden honeypot. TestimonialWall shows the approved ones as a masonry wall, an equal grid, or a spotlight that steps through one large quote at a time.

When to useCopy Anchor Link

• A "share your experience" page and the social-proof section of a landing page.

When not to useCopy Anchor Link

• Product reviews with votes and replies: build those on Field and lists.
• An average score in a header: use Rating.

ImportCopy Anchor Link

import { TestimonialForm, TestimonialWall, validateTestimonial } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { TestimonialForm, TestimonialWall } from "@fadymondy/nasaq/web";

export const Page = ({ items }: { items: React.ComponentProps<typeof TestimonialWall>["items"] }) => (
  <>
    <TestimonialWall items={items} layout="wall" />
    <TestimonialForm onSubmit={(s) => fetch("/api/testimonials", { method: "POST", body: JSON.stringify(s) })} />
  </>
);

AnatomyCopy Anchor Link

TestimonialForm     data-slot="testimonial-form": name, role, company, (email), rating group, quote + counter, consent, honeypot
TestimonialWall     data-slot="testimonial-wall" data-layout="wall|grid|spotlight"
└─ figure           data-slot="testimonial": stars, blockquote, figcaption (Avatar, name, role and company)

APICopy Anchor Link

TestimonialFormCopy Anchor Link

TestimonialWallCopy Anchor Link

Logic (exported)Copy Anchor Link

validateTestimonial(input, { requireConsent?, requireRating? }), testimonialStats(list), testimonialOrder(list), testimonialStep(index, step, length), TESTIMONIAL_QUOTE_MIN and TESTIMONIAL_QUOTE_MAX.

ExamplesCopy Anchor Link

Moderation menuCopy Anchor Link

import { TestimonialWall, type Testimonial } from "@fadymondy/nasaq/web";

export const Moderate = ({ items, hide }: { items: Testimonial[]; hide: (id: string) => void }) => (
  <TestimonialWall items={items} layout="grid" itemActions={(t) => [{ id: "hide", label: "Hide", danger: true, onSelect: () => hide(t.id) }]} />
);

AccessibilityCopy Anchor Link

• The rating is a group of five labelled toggle buttons ("3 stars"); a rated testimonial reads "Rated 5 out of 5".
• Cards with actions are focusable so the keyboard can open their menu.
• The spotlight is a carousel with previous and next buttons and one dot button per quote, each named.

RTL & i18nCopy Anchor Link

• All text has Arabic and English defaults; quotes are shown as written, in their own direction.
• Previous and next arrows flip in Arabic. The quote length counts characters, so Arabic is not penalised.

Styling & tokensCopy Anchor Link

Cards use --nq-card/border tokens; stars use the accent token. The wall uses CSS columns (1, 2, then 3 from lg).

Do / Don'tCopy Anchor Link

• Do ask for consent and only show approved testimonials.
• Do keep the honeypot.
• Don't invent testimonials or ratings.

RelatedCopy Anchor Link

• PublicForm · Avatar · Rating

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-website-testimonials--docs