Skip to content
blobz
Try it live
Blobz docs
Components

Testimonial Card

Editorial quotes with a generous image, and compact cards for a testimonial grid.

Editorial

A square portrait, thin rules, and a clear typographic hierarchy. The layout stacks on narrow screens and sits side by side when space allows.

“Thoughtful defaults make the small details feel effortless.”
Example customerDesign team · Example company
View code
testimonial-card-example.tsx
import { TestimonialCard } from "@/components/blobz/testimonial-card";

export function TestimonialCardExample() {
	return (
		<TestimonialCard
			attribution="Design team · Example company"
			avatar={{ name: "Avery", palette: ["#fff0e2", "#fa9769"] }}
			className="w-full max-w-2xl"
			name="Example customer"
			quote="“Thoughtful defaults make the small details feel effortless.”"
		/>
	);
}

The quotes and customer details on this page are illustrative sample content.

Installation

npx shadcn@latest add @blobz/testimonial-card

The shared Avatar component is installed automatically.

Usage

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

<TestimonialCard
  avatar={{ name: "Avery" }}
  name="Example customer"
  quote="“Thoughtful defaults make the small details feel effortless.”"
  attribution="Design team · Example company"
/>

Omit avatar.src to use a generated face. A failed image automatically falls back to the same generated avatar.

Compact

Use variant="compact" for a standalone card or a grid. Quotes wrap naturally without a fixed height.

“A little character goes a long way. Even an empty profile feels considered.”
Example customerProduct team · Example company
View code
testimonial-card-compact-example.tsx
import { TestimonialCard } from "@/components/blobz/testimonial-card";

export function TestimonialCardCompactExample() {
	return (
		<TestimonialCard
			attribution="Product team · Example company"
			avatar={{ name: "Maya", palette: ["#f4e8ff", "#b881eb"] }}
			className="w-full max-w-sm"
			name="Example customer"
			quote="“A little character goes a long way. Even an empty profile feels considered.”"
			variant="compact"
		/>
	);
}

API

Accepts figure props, including className, plus:

Prop

Type

Avatar Chip

Display selected people, assignees, and recipients in a compact identity chip.

Profile Card

Compact and featured profiles with image fallbacks, biographies, and composable actions.

Theme

On this page

EditorialInstallationUsageCompactAPI