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.

Stats Grid

Bento Stats Grid rendered with email-safe, renderer-native components.

React Email MJML React JSX Email

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";
import { defaultTheme } from "@/components/email/theme-default";

export function BentoStatsGridDemo() {
  return (
    <BentoStatsGrid
      variant="even-split"
      style="chart"
      placement="image-top-right"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


$ pnpm dlx shadcn@latest add @emailcn/mjml-react/bento-stats-grid

Usage

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

<BentoStatsGrid
  variant="even-split"
  style="chart"
  placement="image-top-right"
/>

Examples

Two-thirds bento grid with stats

image-top-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopRightStyleCompactVariantTwoThirdsExampleDemo() {
  return (
    <BentoStatsGrid
      variant="two-thirds"
      style="compact"
      placement="image-top-right"
    />
  );
}

image-top-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopLeftStyleCompactVariantTwoThirdsExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-top-left"
      style="compact"
      variant="two-thirds"
    />
  );
}

image-bottom-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomRightStyleCompactVariantTwoThirdsExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-right"
      style="compact"
      variant="two-thirds"
    />
  );
}

image-bottom-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomLeftStyleCompactVariantTwoThirdsExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-left"
      style="compact"
      variant="two-thirds"
    />
  );
}

Bento grid with even split and image stats

image-top-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopRightStyleChartVariantEvenSplitExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-top-right"
      style="chart"
      variant="even-split"
    />
  );
}

image-top-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopLeftStyleChartVariantEvenSplitExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-top-left"
      style="chart"
      variant="even-split"
    />
  );
}

image-bottom-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomRightStyleChartVariantEvenSplitExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-right"
      style="chart"
      variant="even-split"
    />
  );
}

image-bottom-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomLeftStyleChartVariantEvenSplitExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-left"
      style="chart"
      variant="even-split"
    />
  );
}

Bento grid with even split and text stats

image-top-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopRightStyleTextVariantEvenSplitExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-top-right"
      style="text"
      variant="even-split"
    />
  );
}

image-top-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopLeftStyleTextVariantEvenSplitExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-top-left"
      style="text"
      variant="even-split"
    />
  );
}

image-bottom-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomRightStyleTextVariantEvenSplitExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-right"
      style="text"
      variant="even-split"
    />
  );
}

image-bottom-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomLeftStyleTextVariantEvenSplitExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-left"
      style="text"
      variant="even-split"
    />
  );
}

Bento grid with 3 columns and even split image stats

image-top-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopRightStyleChartVariantThreeColumnExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-top-right"
      style="chart"
      variant="three-column"
    />
  );
}

image-top-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopLeftStyleChartVariantThreeColumnExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-top-left"
      style="chart"
      variant="three-column"
    />
  );
}

image-bottom-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomRightStyleChartVariantThreeColumnExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-right"
      style="chart"
      variant="three-column"
    />
  );
}

image-bottom-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomLeftStyleChartVariantThreeColumnExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-left"
      style="chart"
      variant="three-column"
    />
  );
}

Bento grid with 3 columns and even split text stats

image-top-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopRightStyleTextVariantThreeColumnExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-top-right"
      style="text"
      variant="three-column"
    />
  );
}

image-top-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageTopLeftStyleTextVariantThreeColumnExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-top-left"
      style="text"
      variant="three-column"
    />
  );
}

image-bottom-right

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomRightStyleTextVariantThreeColumnExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-right"
      style="text"
      variant="three-column"
    />
  );
}

image-bottom-left

import { BentoStatsGrid } from "@/components/email/bento-stats-grid";

export function BentoStatsGridPlacementImageBottomLeftStyleTextVariantThreeColumnExampleDemo() {
  return (
    <BentoStatsGrid
      placement="image-bottom-left"
      style="text"
      variant="three-column"
    />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`variant`	`"two-thirds" \| "even-split" \| "three-column"`	`"two-thirds"`	Selects the stats-grid layout.
`style`	`"compact" \| "chart" \| "text"`	`"compact"`	Selects the metric-card treatment supported by layout.
`placement`	`"image-top-right" \| "image-top-left" \| "image-bottom-right" \| "image-bottom-left"`	`"image-top-right"`	Positions the image card in the selected layout.
`data`	{ feature: { description: string; title: string }; imageAlt: string; imageSrc: string; metric: { change: string; period: string; title: string; value: string }; stat: { label: string; suffix: string; value: string } } \| { feature: { description: string; title: string }; imageAlt: string; imageSrc: string; metric: { change: string; comparison?: string; reportHref: string; reportLabel: string; title: string; value: string }; stat: { label: string; suffix: string; value: string } } \| { imageAlt: string; imageSrc: string; metric: { change: string; comparison?: string; reportHref: string; reportLabel: string; title: string; value: string }; stats: [{ label: string; suffix: string; value: string }, { label: string; suffix: string; value: string }, { label: string; suffix: string; value: string }] }	Built-in data for the selected layout	Replaces the stats data for the selected layout variant.

BentoStatsGridProps is a discriminated union. The selected variant narrows the supported style and data shape.

Product Grid Blog

Edit this page Follow @shadcnlabs Join community