Saasflare UI
Components

Testimonial Card

Customer testimonial card with quote, author name, role, and optional avatar.

Installation

npx shadcn@latest add https://ui.saasflare.io/r/testimonial-card.json
pnpm add @saasflare/ui

Usage

Loading…
"use client"import { TestimonialCard } from "@saasflare/ui"/** A customer testimonial with avatar, attribution, and a star rating. */export function Demo() {    return (        <TestimonialCard            className="w-full max-w-sm"            quote="Saasflare cut our dashboard build time from weeks to a single afternoon. The components just work."            name="Priya Nair"            role="Head of Product, Northbeam"            avatar="https://i.pravatar.cc/96?img=45"            rating={5}        />    )}

Grid

Loading…
"use client"import { TestimonialCard } from "@saasflare/ui"const TESTIMONIALS = [    {        quote: "We replaced three internal libraries with Saasflare and never looked back.",        name: "Marcus Lee",        role: "Staff Engineer, Vercel-scale startup",        avatar: "https://i.pravatar.cc/96?img=14",        rating: 5 as const,    },    {        quote: "The theming system alone paid for itself. One palette swap, every app updated.",        name: "Dana Whitfield",        role: "Design Lead, Orbital",        avatar: "https://i.pravatar.cc/96?img=49",        rating: 5 as const,    },]/** A pair of testimonials side by side for a social-proof section. */export function Demo() {    return (        <div className="grid w-full gap-4 md:grid-cols-2">            {TESTIMONIALS.map((testimonial) => (                <TestimonialCard                    key={testimonial.name}                    quote={testimonial.quote}                    name={testimonial.name}                    role={testimonial.role}                    avatar={testimonial.avatar}                    rating={testimonial.rating}                />            ))}        </div>    )}

API Reference

Prop

Type

On this page