N/A

Testimonials

Render a responsive social-proof section from app-owned testimonial data.

Trusted by teams shipping faster

Use app-owned testimonial data to add focused social proof to a landing page, pricing page, or launch announcement.

Stackhacker UI gave our team a polished starting point without locking us into a product model. We shipped our customer portal redesign in half the time.

Sarah ChenSarah ChenProduct Director, Bloom Finance

The blocks feel production-ready, but still simple enough for our engineers to understand and adapt. That balance is hard to find.

Michael RodriguezMichael RodriguezCo-founder, Wavelength Music

We could bring our own data, avatars, and copy while keeping the interface consistent with our design system. It removed a lot of busywork.

Dr. Aisha JohnsonDr. Aisha JohnsonChief Innovation Officer, GreenTech Solutions

Installation

pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/testimonials.json"

Usage

<script setup lang="ts">
import { Testimonials, type TestimonialItem } from "@/components/testimonials";

const testimonials: TestimonialItem[] = [
  {
    id: "sarah-chen",
    quote: "The redesign reduced support tickets and made onboarding feel effortless.",
    author: {
      name: "Sarah Chen",
      role: "Product Director, Bloom Finance",
      avatar: {
        src: "/avatars/sarah.jpg",
        alt: "Sarah Chen",
      },
    },
  },
];
</script>

<template>
  <Testimonials :items="testimonials" />
</template>

App-Owned Testimonials

Testimonials owns the section layout, quote cards, accessible author rendering, and simple avatar fallback. Your app owns testimonial collection, moderation, ordering, source mapping, avatar storage, image optimization, carousel behavior, analytics, and any CMS or API integration.

Pass already-approved, display-ready testimonial items to the component. Keep remote fetching, caching, personalization, and rotation logic in app code so the registry item remains portable.

Examples

Default

Trusted by teams shipping faster

Use app-owned testimonial data to add focused social proof to a landing page, pricing page, or launch announcement.

Stackhacker UI gave our team a polished starting point without locking us into a product model. We shipped our customer portal redesign in half the time.

Sarah ChenSarah ChenProduct Director, Bloom Finance

The blocks feel production-ready, but still simple enough for our engineers to understand and adapt. That balance is hard to find.

Michael RodriguezMichael RodriguezCo-founder, Wavelength Music

We could bring our own data, avatars, and copy while keeping the interface consistent with our design system. It removed a lot of busywork.

Dr. Aisha JohnsonDr. Aisha JohnsonChief Innovation Officer, GreenTech Solutions

Without Avatars

Avatar fallbacks

Testimonials stay readable when app-owned avatar data is missing or fails to load.

The fallback initials keep author identity clear even when a profile photo is not available.

JLJordan LeeFounder, Northstar Labs

A failed avatar image falls back to initials without changing the testimonial layout.

Priya ShahPriya ShahDesign Lead, Orbit Studio
<Testimonials
  :items="[
    {
      id: 'no-avatar',
      quote: 'The component still renders author identity clearly without an image.',
      author: { name: 'Jordan Lee', role: 'Founder, Northstar Labs' },
    },
  ]"
/>

API Reference

Props

PropTypeDefaultDescription
titlestring"What our customers say"Section heading shown above the testimonials.
descriptionstring"Real feedback from teams using this product to move faster."Optional supporting copy shown below the title.
itemsTestimonialItem[][]Testimonials supplied by your app.
classHTMLAttributes["class"]Additional CSS classes for the section.

Item Type

FieldTypeDescription
idstringStable item id. Falls back to author name plus index when omitted.
quotestringTestimonial quote text.
authorTestimonialAuthorPerson or organization credited for the quote.

Author Type

FieldTypeDescription
namestringAuthor display name.
rolestringOptional role, company, or byline.
descriptionstringOptional legacy-friendly byline. Used when role is omitted.
avatarTestimonialAvatarOptional avatar image supplied by your app.

Avatar Type

FieldTypeDescription
srcstringAvatar image source.
altstringOptional alt text. Falls back to author name.
srcsetstringOptional responsive source set.