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.

Collection

Collection Stats rendered with email-safe, renderer-native components.

React Email MJML React JSX Email

import { CollectionStats } from "@/components/email/collection-stats";
import { defaultTheme } from "@/components/email/theme-default";

export function CollectionStatsDemo() {
  return (
    <CollectionStats
      appearance="accent"
      featured={{ label: "Customer retention", value: "92%" }}
      items={[
        { label: "Faster onboarding", value: "3.2×" },
        { label: "More conversions", value: "41%" },
        { label: "Saved each week", value: "18h" },
      ]}
      layout="bento"
      reverse
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


$ pnpm dlx shadcn@latest add @emailcn/jsx-email/collection-stats

Usage

import { CollectionStats } from "@/components/email/collection-stats";

<CollectionStats layout="row" appearance="simple" />

Examples

Simple stats

simple

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutRowAppearanceSimpleExampleDemo() {
  return <CollectionStats layout="row" appearance="simple" />;
}

outlined

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutRowAppearanceOutlinedExampleDemo() {
  return <CollectionStats layout="row" appearance="outlined" />;
}

bordered

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutRowAppearanceBorderedExampleDemo() {
  return <CollectionStats layout="row" appearance="bordered" />;
}

boxed

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutRowAppearanceBoxedExampleDemo() {
  return <CollectionStats layout="row" appearance="boxed" />;
}

Grid stats

simple three columns

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutThreeColumnsAppearanceSimpleExampleDemo() {
  return <CollectionStats layout="three-columns" appearance="simple" />;
}

boxed three columns

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutThreeColumnsAppearanceBoxedExampleDemo() {
  return <CollectionStats layout="three-columns" appearance="boxed" />;
}

boxed bento

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutBentoAppearanceBoxedExampleDemo() {
  return <CollectionStats layout="bento" appearance="boxed" />;
}

boxed bento reversed

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutBentoReverseAppearanceBoxedExampleDemo() {
  return <CollectionStats layout="bento" reverse appearance="boxed" />;
}

accent column three columns

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutThreeColumnsAppearanceAccentExampleDemo() {
  return <CollectionStats layout="three-columns" appearance="accent" />;
}

accent column bento

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutBentoAppearanceAccentExampleDemo() {
  return <CollectionStats layout="bento" appearance="accent" />;
}

accent column bento reversed

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutBentoReverseAppearanceAccentExampleDemo() {
  return <CollectionStats layout="bento" reverse appearance="accent" />;
}

bordered three columns

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutThreeColumnsAppearanceBorderedExampleDemo() {
  return <CollectionStats layout="three-columns" appearance="bordered" />;
}

bordered bento

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutBentoAppearanceBorderedExampleDemo() {
  return <CollectionStats layout="bento" appearance="bordered" />;
}

bordered bento reversed

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutBentoReverseAppearanceBorderedExampleDemo() {
  return <CollectionStats layout="bento" reverse appearance="bordered" />;
}

outlined three columns

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutThreeColumnsAppearanceOutlinedExampleDemo() {
  return <CollectionStats layout="three-columns" appearance="outlined" />;
}

outlined bento

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutBentoAppearanceOutlinedExampleDemo() {
  return <CollectionStats layout="bento" appearance="outlined" />;
}

outlined bento reversed

import { CollectionStats } from "@/components/email/collection-stats";

export function CollectionStatsLayoutBentoReverseAppearanceOutlinedExampleDemo() {
  return <CollectionStats layout="bento" reverse appearance="outlined" />;
}

Overlay stats

default

import { CollectionStats } from "@/components/email/collection-stats";
import { emailAsset } from "@/components/email/email-assets";

export function CollectionStatsLayoutRowBackgroundImageExampleDemo() {
  return (
    <CollectionStats
      layout="row"
      backgroundImage={{
        alt: "Background",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

three columns

import { CollectionStats } from "@/components/email/collection-stats";
import { emailAsset } from "@/components/email/email-assets";

export function CollectionStatsLayoutThreeColumnsBackgroundImageExampleDemo() {
  return (
    <CollectionStats
      layout="three-columns"
      backgroundImage={{
        alt: "Background",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

bento

import { CollectionStats } from "@/components/email/collection-stats";
import { emailAsset } from "@/components/email/email-assets";

export function CollectionStatsLayoutBentoBackgroundImageExampleDemo() {
  return (
    <CollectionStats
      layout="bento"
      backgroundImage={{
        alt: "Background",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

bento reversed

import { CollectionStats } from "@/components/email/collection-stats";
import { emailAsset } from "@/components/email/email-assets";

export function CollectionStatsLayoutBentoReverseBackgroundImageExampleDemo() {
  return (
    <CollectionStats
      layout="bento"
      reverse
      backgroundImage={{
        alt: "Background",
        src: emailAsset("images/image-landscape-1.jpg"),
      }}
    />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`items`	`Array<{ label: string; value: string; description?: string }>`	-	Configures the component's items.
`featured`	`{ label: string; value: string; description?: string }`	-	Configures the component's featured.
`layout`	`"row" \| "three-columns" \| "bento"`	`"row"`	Configures the component's layout.
`reverse`	`boolean`	`false`	Configures the component's reverse.
`appearance`	`"simple" \| "outlined" \| "bordered" \| "boxed" \| "accent"`	`"simple"`	Configures the component's appearance.
`backgroundImage`	`{ src: string; alt?: string }`	-	Configures the component's backgroundimage.

Stats Spotlight

Edit this page Follow @shadcnlabs Join community