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.

Grid

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

React Email MJML React JSX Email

import { Grid } from "@/components/email/grid";
import { defaultTheme } from "@/components/email/theme-default";

export function GridDemo() {
  return (
    <Grid
      variant="two-columns"
      align="center"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


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

Usage

import { Grid } from "@/components/email/grid";

<Grid variant="two-columns" align="center" />

Examples

One column grid

Default

import { Grid } from "@/components/email/grid";

export function GridVariantOneColumnExampleDemo() {
  return <Grid variant="one-column" />;
}

Flush

import { Grid } from "@/components/email/grid";

export function GridVariantOneColumnFlushExampleDemo() {
  return <Grid variant="one-column" flush />;
}

2 columns grid

With gap

import { Grid } from "@/components/email/grid";

export function GridVariantTwoColumnsAlignCenterExampleDemo() {
  return <Grid variant="two-columns" align="center" />;
}

No gap

import { Grid } from "@/components/email/grid";

export function GridVariantTwoColumnsGapFalseExampleDemo() {
  return <Grid variant="two-columns" gap={false} />;
}

Flush

import { Grid } from "@/components/email/grid";

export function GridVariantTwoColumnsFlushExampleDemo() {
  return <Grid variant="two-columns" flush />;
}

Flush no gap

import { Grid } from "@/components/email/grid";

export function GridVariantTwoColumnsFlushGapFalseExampleDemo() {
  return <Grid variant="two-columns" flush gap={false} />;
}

Gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantTwoColumnsReverseExampleDemo() {
  return <Grid variant="two-columns" reverse />;
}

No gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantTwoColumnsGapFalseReverseExampleDemo() {
  return <Grid variant="two-columns" gap={false} reverse />;
}

Flush no gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantTwoColumnsFlushGapFalseReverseExampleDemo() {
  return <Grid variant="two-columns" flush gap={false} reverse />;
}

Flush reverse

import { Grid } from "@/components/email/grid";

export function GridVariantTwoColumnsFlushReverseExampleDemo() {
  return <Grid variant="two-columns" flush reverse />;
}

1/3 split grid

With gap

import { Grid } from "@/components/email/grid";

export function GridVariantOneThreeSplitExampleDemo() {
  return <Grid variant="one-three-split" />;
}

No gap

import { Grid } from "@/components/email/grid";

export function GridVariantOneThreeSplitGapFalseExampleDemo() {
  return <Grid variant="one-three-split" gap={false} />;
}

Flush

import { Grid } from "@/components/email/grid";

export function GridVariantOneThreeSplitFlushExampleDemo() {
  return <Grid variant="one-three-split" flush />;
}

Flush no gap

import { Grid } from "@/components/email/grid";

export function GridVariantOneThreeSplitFlushGapFalseExampleDemo() {
  return <Grid variant="one-three-split" flush gap={false} />;
}

Gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantOneThreeSplitReverseExampleDemo() {
  return <Grid variant="one-three-split" reverse />;
}

No gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantOneThreeSplitGapFalseReverseExampleDemo() {
  return <Grid variant="one-three-split" gap={false} reverse />;
}

Flush no gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantOneThreeSplitFlushGapFalseReverseExampleDemo() {
  return <Grid variant="one-three-split" flush gap={false} reverse />;
}

Flush reverse

import { Grid } from "@/components/email/grid";

export function GridVariantOneThreeSplitFlushReverseExampleDemo() {
  return <Grid variant="one-three-split" flush reverse />;
}

3/1 split grid

With gap

import { Grid } from "@/components/email/grid";

export function GridVariantThreeOneSplitExampleDemo() {
  return <Grid variant="three-one-split" />;
}

No gap

import { Grid } from "@/components/email/grid";

export function GridVariantThreeOneSplitGapFalseExampleDemo() {
  return <Grid variant="three-one-split" gap={false} />;
}

Flush

import { Grid } from "@/components/email/grid";

export function GridVariantThreeOneSplitFlushExampleDemo() {
  return <Grid variant="three-one-split" flush />;
}

Flush no gap

import { Grid } from "@/components/email/grid";

export function GridVariantThreeOneSplitFlushGapFalseExampleDemo() {
  return <Grid variant="three-one-split" flush gap={false} />;
}

Gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantThreeOneSplitReverseExampleDemo() {
  return <Grid variant="three-one-split" reverse />;
}

No gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantThreeOneSplitGapFalseReverseExampleDemo() {
  return <Grid variant="three-one-split" gap={false} reverse />;
}

Flush no gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantThreeOneSplitFlushGapFalseReverseExampleDemo() {
  return <Grid variant="three-one-split" flush gap={false} reverse />;
}

Flush reverse

import { Grid } from "@/components/email/grid";

export function GridVariantThreeOneSplitFlushReverseExampleDemo() {
  return <Grid variant="three-one-split" flush reverse />;
}

3 columns grid

With gap

import { Grid } from "@/components/email/grid";

export function GridVariantThreeColumnsExampleDemo() {
  return <Grid variant="three-columns" />;
}

No gap

import { Grid } from "@/components/email/grid";

export function GridVariantThreeColumnsGapFalseExampleDemo() {
  return <Grid variant="three-columns" gap={false} />;
}

Flush

import { Grid } from "@/components/email/grid";

export function GridVariantThreeColumnsFlushExampleDemo() {
  return <Grid variant="three-columns" flush />;
}

Flush no gap

import { Grid } from "@/components/email/grid";

export function GridVariantThreeColumnsFlushGapFalseExampleDemo() {
  return <Grid variant="three-columns" flush gap={false} />;
}

Gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantThreeColumnsReverseExampleDemo() {
  return <Grid variant="three-columns" reverse />;
}

No gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantThreeColumnsGapFalseReverseExampleDemo() {
  return <Grid variant="three-columns" gap={false} reverse />;
}

Flush no gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantThreeColumnsFlushGapFalseReverseExampleDemo() {
  return <Grid variant="three-columns" flush gap={false} reverse />;
}

Flush reverse

import { Grid } from "@/components/email/grid";

export function GridVariantThreeColumnsFlushReverseExampleDemo() {
  return <Grid variant="three-columns" flush reverse />;
}

4 columns grid

With gap

import { Grid } from "@/components/email/grid";

export function GridVariantFourColumnsExampleDemo() {
  return <Grid variant="four-columns" />;
}

No gap

import { Grid } from "@/components/email/grid";

export function GridVariantFourColumnsGapFalseExampleDemo() {
  return <Grid variant="four-columns" gap={false} />;
}

Flush

import { Grid } from "@/components/email/grid";

export function GridVariantFourColumnsFlushExampleDemo() {
  return <Grid variant="four-columns" flush />;
}

Flush no gap

import { Grid } from "@/components/email/grid";

export function GridVariantFourColumnsFlushGapFalseExampleDemo() {
  return <Grid variant="four-columns" flush gap={false} />;
}

Gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantFourColumnsReverseExampleDemo() {
  return <Grid variant="four-columns" reverse />;
}

No gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantFourColumnsGapFalseReverseExampleDemo() {
  return <Grid variant="four-columns" gap={false} reverse />;
}

Flush no gap reverse

import { Grid } from "@/components/email/grid";

export function GridVariantFourColumnsFlushGapFalseReverseExampleDemo() {
  return <Grid variant="four-columns" flush gap={false} reverse />;
}

Flush reverse

import { Grid } from "@/components/email/grid";

export function GridVariantFourColumnsFlushReverseExampleDemo() {
  return <Grid variant="four-columns" flush reverse />;
}

API Reference

Prop	Type	Default	Description
`align`	`"center" \| "left" \| "right"`	`"center"`	Aligns the text inside each cell.
`cells`	`string[]`	Built-in labels	Sets the cell content in visual order.
`flush`	`boolean`	`false`	Removes the 24px horizontal container gutters.
`gap`	`boolean`	`true`	Adds a 24px gap between columns.
`reverse`	`boolean`	`false`	Reverses the column order when the grid stacks on mobile.
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`variant`	`"one-column" \| "two-columns" \| "one-three-split" \| "three-one-split" \| "three-columns" \| "four-columns"`	`"two-columns"`	Selects the number and relative widths of the grid columns.

Data Table Pills

Edit this page Follow @shadcnlabs Join community