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.

Reviews

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

React Email MJML React JSX Email

import { Reviews } from "@/components/email/reviews";
import { defaultTheme } from "@/components/email/theme-default";

export function ReviewsDemo() {
  return (
    <Reviews
      layout="full-width"
      identity="text"
      divider="between"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


$ pnpm dlx shadcn@latest add @emailcn/react-email/reviews

Usage

import { Reviews } from "@/components/email/reviews";

<Reviews layout="full-width" identity="text" divider="none" />

Examples

Full-width reviews

with divider

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityTextDividerBetweenExampleDemo() {
  return <Reviews layout="full-width" identity="text" divider="between" />;
}

simple

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityTextDividerNoneExampleDemo() {
  return <Reviews layout="full-width" identity="text" divider="none" />;
}

divider top

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityTextDividerTopExampleDemo() {
  return <Reviews layout="full-width" identity="text" divider="top" />;
}

with logo

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityLogoDividerNoneExampleDemo() {
  return <Reviews layout="full-width" identity="logo" divider="none" />;
}

logo split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityLogoDividerBetweenExampleDemo() {
  return <Reviews layout="full-width" identity="logo" divider="between" />;
}

logo bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityLogoDividerBottomExampleDemo() {
  return <Reviews layout="full-width" identity="logo" divider="bottom" />;
}

avatar inline

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarInlineDividerNoneExampleDemo() {
  return (
    <Reviews layout="full-width" identity="avatar-inline" divider="none" />
  );
}

avatar inline split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarInlineDividerBetweenExampleDemo() {
  return (
    <Reviews layout="full-width" identity="avatar-inline" divider="between" />
  );
}

avatar inline bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarInlineDividerBottomExampleDemo() {
  return (
    <Reviews layout="full-width" identity="avatar-inline" divider="bottom" />
  );
}

centered with avatar

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarCenteredDividerNoneExampleDemo() {
  return (
    <Reviews layout="full-width" identity="avatar-centered" divider="none" />
  );
}

centered avatar split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarCenteredDividerBetweenExampleDemo() {
  return (
    <Reviews layout="full-width" identity="avatar-centered" divider="between" />
  );
}

centered avatar bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarCenteredDividerBottomExampleDemo() {
  return (
    <Reviews layout="full-width" identity="avatar-centered" divider="bottom" />
  );
}

avatar logo

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarLogoDividerNoneExampleDemo() {
  return <Reviews layout="full-width" identity="avatar-logo" divider="none" />;
}

avatar logo split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarLogoDividerBetweenExampleDemo() {
  return (
    <Reviews layout="full-width" identity="avatar-logo" divider="between" />
  );
}

avatar logo bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarLogoDividerBottomExampleDemo() {
  return (
    <Reviews layout="full-width" identity="avatar-logo" divider="bottom" />
  );
}

avatar aside

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarAsideDividerNoneExampleDemo() {
  return <Reviews layout="full-width" identity="avatar-aside" divider="none" />;
}

avatar aside split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarAsideDividerBetweenExampleDemo() {
  return (
    <Reviews layout="full-width" identity="avatar-aside" divider="between" />
  );
}

avatar aside reverse

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutFullWidthIdentityAvatarAsideDividerNoneReverseExampleDemo() {
  return (
    <Reviews
      layout="full-width"
      identity="avatar-aside"
      divider="none"
      reverse
    />
  );
}

Masonry grid reviews

with divider

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityTextDividerBetweenExampleDemo() {
  return <Reviews layout="masonry" identity="text" divider="between" />;
}

simple

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityTextDividerNoneExampleDemo() {
  return <Reviews layout="masonry" identity="text" divider="none" />;
}

divider top

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityTextDividerTopExampleDemo() {
  return <Reviews layout="masonry" identity="text" divider="top" />;
}

with logo

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityLogoDividerNoneExampleDemo() {
  return <Reviews layout="masonry" identity="logo" divider="none" />;
}

logo split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityLogoDividerBetweenExampleDemo() {
  return <Reviews layout="masonry" identity="logo" divider="between" />;
}

logo bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityLogoDividerBottomExampleDemo() {
  return <Reviews layout="masonry" identity="logo" divider="bottom" />;
}

avatar inline

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityAvatarInlineDividerNoneExampleDemo() {
  return <Reviews layout="masonry" identity="avatar-inline" divider="none" />;
}

avatar inline split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityAvatarInlineDividerBetweenExampleDemo() {
  return (
    <Reviews layout="masonry" identity="avatar-inline" divider="between" />
  );
}

avatar inline bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityAvatarInlineDividerBottomExampleDemo() {
  return <Reviews layout="masonry" identity="avatar-inline" divider="bottom" />;
}

centered with avatar

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityAvatarCenteredDividerNoneExampleDemo() {
  return <Reviews layout="masonry" identity="avatar-centered" divider="none" />;
}

centered avatar split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityAvatarCenteredDividerBetweenExampleDemo() {
  return (
    <Reviews layout="masonry" identity="avatar-centered" divider="between" />
  );
}

centered avatar bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityAvatarCenteredDividerBottomExampleDemo() {
  return (
    <Reviews layout="masonry" identity="avatar-centered" divider="bottom" />
  );
}

avatar logo

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityAvatarLogoDividerNoneExampleDemo() {
  return <Reviews layout="masonry" identity="avatar-logo" divider="none" />;
}

avatar logo split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityAvatarLogoDividerBetweenExampleDemo() {
  return <Reviews layout="masonry" identity="avatar-logo" divider="between" />;
}

avatar logo bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutMasonryIdentityAvatarLogoDividerBottomExampleDemo() {
  return <Reviews layout="masonry" identity="avatar-logo" divider="bottom" />;
}

Two-column reviews

with divider

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityTextDividerBetweenExampleDemo() {
  return <Reviews layout="two-columns" identity="text" divider="between" />;
}

simple

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityTextDividerNoneExampleDemo() {
  return <Reviews layout="two-columns" identity="text" divider="none" />;
}

divider top

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityTextDividerTopExampleDemo() {
  return <Reviews layout="two-columns" identity="text" divider="top" />;
}

with logo

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityLogoDividerNoneExampleDemo() {
  return <Reviews layout="two-columns" identity="logo" divider="none" />;
}

logo split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityLogoDividerBetweenExampleDemo() {
  return <Reviews layout="two-columns" identity="logo" divider="between" />;
}

logo bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityLogoDividerBottomExampleDemo() {
  return <Reviews layout="two-columns" identity="logo" divider="bottom" />;
}

avatar inline

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityAvatarInlineDividerNoneExampleDemo() {
  return (
    <Reviews layout="two-columns" identity="avatar-inline" divider="none" />
  );
}

avatar inline split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityAvatarInlineDividerBetweenExampleDemo() {
  return (
    <Reviews layout="two-columns" identity="avatar-inline" divider="between" />
  );
}

avatar inline bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityAvatarInlineDividerBottomExampleDemo() {
  return (
    <Reviews layout="two-columns" identity="avatar-inline" divider="bottom" />
  );
}

centered with avatar

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityAvatarCenteredDividerNoneExampleDemo() {
  return (
    <Reviews layout="two-columns" identity="avatar-centered" divider="none" />
  );
}

centered avatar split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityAvatarCenteredDividerBetweenExampleDemo() {
  return (
    <Reviews
      layout="two-columns"
      identity="avatar-centered"
      divider="between"
    />
  );
}

centered avatar bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityAvatarCenteredDividerBottomExampleDemo() {
  return (
    <Reviews layout="two-columns" identity="avatar-centered" divider="bottom" />
  );
}

avatar logo

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityAvatarLogoDividerNoneExampleDemo() {
  return <Reviews layout="two-columns" identity="avatar-logo" divider="none" />;
}

avatar logo split

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityAvatarLogoDividerBetweenExampleDemo() {
  return (
    <Reviews layout="two-columns" identity="avatar-logo" divider="between" />
  );
}

avatar logo bottom

import { Reviews } from "@/components/email/reviews";

export function ReviewsLayoutTwoColumnsIdentityAvatarLogoDividerBottomExampleDemo() {
  return (
    <Reviews layout="two-columns" identity="avatar-logo" divider="bottom" />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`items`	`Array<{ avatarUrl?: string; company?: string; date: string; logoAlt?: string; logoUrl?: string; logoWidth?: number; name: string; rating: number; text: string }>`	-	Configures the component's items.
`layout`	`"full-width" \| "two-columns" \| "masonry"`	`"full-width"`	Configures the component's layout.
`identity`	`"text" \| "logo" \| "avatar-inline" \| "avatar-centered" \| "avatar-logo" \| "avatar-aside"`	`"text"`	Configures the component's identity.
`divider`	`"none" \| "top" \| "between" \| "bottom"`	`"none"`	Configures the component's divider.
`reverse`	`boolean`	`false`	Configures the component's reverse.

Shopping Cart UI Elements

Edit this page Follow @shadcnlabs Join community