A collection of beautifully designed, accessible, and customizable email components for React Email, MJML React, and JSX Email. Works with shadcn/ui.

How do I use emailcn?

Use npx shadcn@latest add with our registry URL to install components and blocks. Themes, components, and blocks are all installable via the shadcn CLI.

Is emailcn open source?

Yes. The source is on GitHub and released under the MIT License.

Testimonial

Testimonial rendered with email-safe, renderer-native components.

React Email MJML React JSX Email

import { Testimonial } from "@/components/email/testimonial";
import { defaultTheme } from "@/components/email/theme-default";

export function TestimonialDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="left"
      appearance="plain"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


$ pnpm dlx shadcn@latest add @emailcn/mjml-react/testimonial

Usage

import { Testimonial } from "@/components/email/testimonial";

<Testimonial layout="full-width" avatarTreatment="inline" />

Examples

Centered testimonial with CTA

With quote

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutCenteredVariantQuoteExampleDemo() {
  return <Testimonial layout="centered" variant="quote" />;
}

Text top

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutCenteredVariantTextTopExampleDemo() {
  return <Testimonial layout="centered" variant="text-top" />;
}

Text bottom

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutCenteredVariantTextBottomExampleDemo() {
  return <Testimonial layout="centered" variant="text-bottom" />;
}

Split testimonial with CTA

Image left

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutSplitPlacementLeftExampleDemo() {
  return <Testimonial layout="split" placement="left" />;
}

Image right

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutSplitPlacementRightExampleDemo() {
  return <Testimonial layout="split" placement="right" />;
}

Full width testimonial

Left aligned

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentLeftAppearancePlainAvatarTreatmentInlineExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="left"
      appearance="plain"
      avatarTreatment="inline"
    />
  );
}

Centered

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentCenterAppearancePlainAvatarTreatmentInlineExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="center"
      appearance="plain"
      avatarTreatment="inline"
    />
  );
}

Boxed left

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentLeftAppearanceBoxedAvatarTreatmentInlineExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="left"
      appearance="boxed"
      avatarTreatment="inline"
    />
  );
}

Boxed centered

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentCenterAppearanceBoxedAvatarTreatmentInlineExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="center"
      appearance="boxed"
      avatarTreatment="inline"
    />
  );
}

Accent left

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentLeftAppearanceAccentAvatarTreatmentInlineExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="left"
      appearance="accent"
      avatarTreatment="inline"
    />
  );
}

Accent centered

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentCenterAppearanceAccentAvatarTreatmentInlineExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="center"
      appearance="accent"
      avatarTreatment="inline"
    />
  );
}

Full width testimonial with overlapping avatar

Bottom left

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentLeftAvatarTreatmentOverlappingPlacementBottomExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="left"
      avatarTreatment="overlapping"
      placement="bottom"
    />
  );
}

Centered

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentCenterAvatarTreatmentOverlappingPlacementBottomExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="center"
      avatarTreatment="overlapping"
      placement="bottom"
    />
  );
}

Top left

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentLeftAvatarTreatmentOverlappingPlacementTopExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="left"
      avatarTreatment="overlapping"
      placement="top"
    />
  );
}

Top centered

import { Testimonial } from "@/components/email/testimonial";

export function TestimonialLayoutFullWidthAlignmentCenterAvatarTreatmentOverlappingPlacementTopExampleDemo() {
  return (
    <Testimonial
      layout="full-width"
      alignment="center"
      avatarTreatment="overlapping"
      placement="top"
    />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`quote`	`string`	Layout-specific built-in copy	Sets the testimonial quote.
`author`	`string`	Layout-specific built-in author	Sets the quoted person's name.
`role`	`string`	Layout-specific built-in role	Sets the quoted person's role.
`company`	`string`	`"Monarch"`	Sets the company used by CTA layouts.
`avatar`	`{ src: string; alt?: string }`	Built-in avatar	Overrides the testimonial avatar.
`logo`	`{ src: string; alt?: string }`	Appearance-specific built-in logo	Overrides the customer logo.
`layout`	`"full-width" \| "centered" \| "split"`	`"full-width"`	Selects the testimonial's structural layout.
`alignment`	`"left" \| "center"`	`"left"`	Aligns full-width testimonial content.
`appearance`	`"plain" \| "boxed" \| "accent"`	`"plain"`	Styles an inline full-width testimonial.
`avatarTreatment`	`"inline" \| "overlapping"`	`"inline"`	Places the full-width avatar inline or across the card boundary.
`placement`	`"left" \| "right" \| "top" \| "bottom"`	Layout-specific	Positions the split image or overlapping avatar.
`variant`	`"quote" \| "text-top" \| "text-bottom"`	`"quote"`	Selects the centered CTA content treatment.
`action`	`{ href: string; label: string }`	Built-in case-study link	Overrides the action shown by centered and split CTA layouts.

Team Timelines

Edit this page Follow @shadcnlabs Join community