Testimonial Card

Use Testimonial Card to give a customer quote a calm, editorial presence. The quote leads the composition, while a rating and author identity supply concise proof.

Preview

Reduce motion:Off

Tune:Off

Inspect

Customer story

“Sona UI gave us a thoughtful baseline without making the product feel assembled from generic parts.”

Installation

npx shadcn@latest add @sona-ui/testimonial-card

Basic usage

testimonial.tsx

import TestimonialCard from "@/components/ui/testimonial-card/testimonial-card";
 
export function Testimonial() {
return (
  <TestimonialCard
    authorName="Avery Chen"
    authorMeta="Product Designer, Linear"
    avatarAlt="Avery Chen"
  >
    This made our interface feel immediately more considered.
  </TestimonialCard>
);
}

Examples

Use the static card in grids, carousels, and editorial proof points. Enable depth="subtle" only for a featured testimonial with enough room to respond to a fine pointer.

Usage


export default function TestimonialCardDemo() {
  return (
    <TestimonialCard
      authorName="Avery Chen"
      authorMeta="Product Designer, Linear"
      avatarAlt="Avery Chen"
      eyebrow="Customer story"
    >
      Sona UI gave us a thoughtful baseline without making the product feel
      assembled from generic parts.
    </TestimonialCard>
  );
}

API

Property	Type	Default	Description
`children`	`ReactNode`	`required`	The testimonial quote.
`authorName`	`string`	`required`	Name of the person giving the testimonial.
`authorMeta`	`string`	`undefined`	The person's role, company, or both.
`avatarAlt`	`string`	`required`	Accessible description for the author avatar.
`avatarUrl`	`string`	`undefined`	URL of the author avatar.
`rating`	`number`	`5`	Rating shown above the quote, from 0 to 5.
`eyebrow`	`string`	`undefined`	Optional label placed above the rating.
`depth`	`TestimonialCardDepth`	`"none"`	Enables shallow, fine-pointer hover depth.

Accessibility

The testimonial uses an article and blockquote structure. The rating includes an accessible text equivalent, avatar descriptions are supplied by the consumer, and the depth treatment is removed when reduced motion is preferred.

Styling

Use className to adjust width or placement. The card uses semantic theme tokens and a smooth-shadow ring, so it adapts cleanly to the active Sona UI theme.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.