2 variants

Testimonial Card

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

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;

108 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Pull quote

One testimonial given the whole width. A large centered quote with a phrase lifted in the primary color, and the person beneath it.

We rebuilt our whole marketing site in a week. The blocks were the easy part; what surprised us was that nothing needed polishing afterwards.

Maya OkaforHead of Design, Northline

usage.tsx

import { TestimonialQuote } from "@/components/registry/testimonial-quote";

export function Quote() {
  return (
    <TestimonialQuote
      quote="We rebuilt our whole site in a week."
      highlight="in a week"
      name="Maya Okafor"
      byline="Head of Design, Northline"
    />
  );
}

"use client";

import { motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

export interface TestimonialQuoteProps {
  quote: string;
  /** A phrase inside the quote to set in the primary color. Must appear in it word for word. */
  highlight?: string;
  name: string;

79 more lines ship with an easeUI Pro license.

Buy a license

Install

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