Marketing

Testimonials Section

A social proof grid of customer quotes with star rating, blockquote, avatar, name, and role. Supports 2 or 3 column layouts with an optional eyebrow and headline.

Testimonials

Loved by developers

“Aether UI saved us weeks of work. We shipped our SaaS MVP in record time.”

Sarah Chen

CTO, Launchpad

“The token system is incredible. Dark mode just works and theming is trivial.”

Marcus Webb

Lead Designer, Forma

“Finally a component library where I actually own the code. No version lock-in.”

Priya Nair

Frontend Engineer, Orbit

import { TestimonialsSection } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add testimonials-section

Import

import.tsx

import { TestimonialsSection } from "@aetherstack/blocks"

Usage

testimonials-section.tsx

import { TestimonialsSection } from "@aetherstack/blocks"

const testimonials = [
  {
    id: "1",
    quote: "Aether UI saved us weeks of work. We shipped our SaaS MVP in record time.",
    author: "Sarah Chen",
    role: "CTO",
    company: "Launchpad",
    rating: 5,
  },
]

export default function SocialProof() {
  return (
    <TestimonialsSection
      eyebrow="Testimonials"
      headline="Loved by developers"
      testimonials={testimonials}
      cols={3}
    />
  )
}

Props

Prop	Type	Default	Description
testimonials*	Testimonial[]	—	Array of testimonial objects. Each has id, quote, author, and optional role, company, avatarUrl, rating.
eyebrow	string	—	Small uppercase label above the headline.
headline	string	—	Section heading.
cols	2 \| 3	3	Grid column count.
className	string	—	Additional classes on the section wrapper.

* Required

Accessibility

→Each quote is wrapped in a <blockquote> element.
→Star ratings include an aria-label with the numeric score.
→Avatar images include an alt attribute set to the author name.