1 variant

Testimonial Card

A quote on the Pro two layer card, with an optional rating and the attribution on its own footer.

We rebuilt the same settings screen three times before this. Dropping in the Pro blocks got us a week back and the motion finally matches the rest of the product.

Jordan LeeDesign engineer, Northline

The part I did not expect. Every component already handled reduced motion and keyboard focus, which is the work nobody budgets for.

Priya RamanStaff engineer, Halcyon Labs

usage.tsx

import { TestimonialCard } from "@/components/registry/testimonial-card";

export function Quote() {
  return (
    <TestimonialCard
      tone="violet"
      rating={5}
      quote="It got us a week back."
      name="Jordan Lee"
      role="Design engineer, Northline"
    />
  );
}

"use client";

import { Star } from "lucide-react";
import { cn } from "@/lib/utils";

const TONES = {
  violet: "var(--violet)",
  neon: "var(--neon)",
  warning: "var(--warning)",
  accent: "var(--accent)",
} as const;

111 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/testimonial-card

Props

quoteRequiredstring

Without quotation marks. The card draws its own.

nameRequiredstring

Also the source of the fallback initials.

bylinestring

Job title and company. Not called role, because that is the ARIA attribute.

avatarSrcstring

Left off, initials are drawn instead.

ratingnumber

Out of five. Left off, no stars are drawn at all, which beats drawing five by default.

tone"violet" | "neon" | "warning" | "accent"Default "violet"

Color of the back panel and the oversized quote mark.

fillbooleanDefault true

Fills the height of the row it sits in, so a short quote and a long one line up along the bottom.

classNamestring

Merged last, so anything passed here wins over the component's own classes.