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.

Content

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

React Email MJML React JSX Email

import { Content } from "@/components/email/content";
import { defaultTheme } from "@/components/email/theme-default";

export function ContentDemo() {
  return (
    <Content
      alignment="center"
      layout="title"
      variant="small"
      theme={defaultTheme}
    />
  );
}

Installation


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

Usage

import { Content } from "@/components/email/content";

<Content alignment="center" layout="title" padding="regular" variant="small" />

Examples

Title with regular padding

Left small

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingRegularAlignmentLeftVariantSmallExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="title"
      padding="regular"
      variant="small"
    />
  );
}

Left large

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingRegularAlignmentLeftVariantLargeExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="title"
      padding="regular"
      variant="large"
    />
  );
}

Centered small

import { Content } from "@/components/email/content";

export function ContentAlignmentCenterLayoutTitlePaddingRegularVariantSmallExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="title"
      padding="regular"
      variant="small"
    />
  );
}

Centered large

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingRegularAlignmentCenterVariantLargeExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="title"
      padding="regular"
      variant="large"
    />
  );
}

Right small

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingRegularAlignmentRightVariantSmallExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="title"
      padding="regular"
      variant="small"
    />
  );
}

Right large

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingRegularAlignmentRightVariantLargeExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="title"
      padding="regular"
      variant="large"
    />
  );
}

Title with large padding

Left small

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingLargeAlignmentLeftVariantSmallExampleDemo() {
  return (
    <Content alignment="left" layout="title" padding="large" variant="small" />
  );
}

Left large

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingLargeAlignmentLeftVariantLargeExampleDemo() {
  return (
    <Content alignment="left" layout="title" padding="large" variant="large" />
  );
}

Centered small

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingLargeAlignmentCenterVariantSmallExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="title"
      padding="large"
      variant="small"
    />
  );
}

Centered large

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingLargeAlignmentCenterVariantLargeExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="title"
      padding="large"
      variant="large"
    />
  );
}

Right small

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingLargeAlignmentRightVariantSmallExampleDemo() {
  return (
    <Content alignment="right" layout="title" padding="large" variant="small" />
  );
}

Right large

import { Content } from "@/components/email/content";

export function ContentLayoutTitlePaddingLargeAlignmentRightVariantLargeExampleDemo() {
  return (
    <Content alignment="right" layout="title" padding="large" variant="large" />
  );
}

Paragraph with regular padding

Lead left

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingRegularAlignmentLeftVariantLeadExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="paragraph"
      padding="regular"
      variant="lead"
    />
  );
}

Body left

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingRegularAlignmentLeftVariantBodyExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="paragraph"
      padding="regular"
      variant="body"
    />
  );
}

Lead centered

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingRegularAlignmentCenterVariantLeadExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="paragraph"
      padding="regular"
      variant="lead"
    />
  );
}

Body centered

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingRegularAlignmentCenterVariantBodyExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="paragraph"
      padding="regular"
      variant="body"
    />
  );
}

Lead right

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingRegularAlignmentRightVariantLeadExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="paragraph"
      padding="regular"
      variant="lead"
    />
  );
}

Body right

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingRegularAlignmentRightVariantBodyExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="paragraph"
      padding="regular"
      variant="body"
    />
  );
}

Paragraph with large padding

Lead left

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingLargeAlignmentLeftVariantLeadExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="paragraph"
      padding="large"
      variant="lead"
    />
  );
}

Body left

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingLargeAlignmentLeftVariantBodyExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="paragraph"
      padding="large"
      variant="body"
    />
  );
}

Lead centered

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingLargeAlignmentCenterVariantLeadExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="paragraph"
      padding="large"
      variant="lead"
    />
  );
}

Body centered

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingLargeAlignmentCenterVariantBodyExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="paragraph"
      padding="large"
      variant="body"
    />
  );
}

Lead right

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingLargeAlignmentRightVariantLeadExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="paragraph"
      padding="large"
      variant="lead"
    />
  );
}

Body right

import { Content } from "@/components/email/content";

export function ContentLayoutParagraphPaddingLargeAlignmentRightVariantBodyExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="paragraph"
      padding="large"
      variant="body"
    />
  );
}

Paragraph 2 columns with regular padding

Lead left

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingRegularAlignmentLeftVariantLeadExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="two-columns"
      padding="regular"
      variant="lead"
    />
  );
}

Body left

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingRegularAlignmentLeftVariantBodyExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="two-columns"
      padding="regular"
      variant="body"
    />
  );
}

Lead centered

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingRegularAlignmentCenterVariantLeadExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="two-columns"
      padding="regular"
      variant="lead"
    />
  );
}

Body centered

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingRegularAlignmentCenterVariantBodyExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="two-columns"
      padding="regular"
      variant="body"
    />
  );
}

Lead right

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingRegularAlignmentRightVariantLeadExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="two-columns"
      padding="regular"
      variant="lead"
    />
  );
}

Body right

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingRegularAlignmentRightVariantBodyExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="two-columns"
      padding="regular"
      variant="body"
    />
  );
}

Paragraph 2 columns with large padding

Lead left

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingLargeAlignmentLeftVariantLeadExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="two-columns"
      padding="large"
      variant="lead"
    />
  );
}

Body left

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingLargeAlignmentLeftVariantBodyExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="two-columns"
      padding="large"
      variant="body"
    />
  );
}

Lead centered

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingLargeAlignmentCenterVariantLeadExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="two-columns"
      padding="large"
      variant="lead"
    />
  );
}

Body centered

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingLargeAlignmentCenterVariantBodyExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="two-columns"
      padding="large"
      variant="body"
    />
  );
}

Lead right

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingLargeAlignmentRightVariantLeadExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="two-columns"
      padding="large"
      variant="lead"
    />
  );
}

Body right

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsPaddingLargeAlignmentRightVariantBodyExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="two-columns"
      padding="large"
      variant="body"
    />
  );
}

Paragraph 2 columns with icons and regular padding

Lead left

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingRegularAlignmentLeftVariantLeadExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="two-columns-with-icons"
      padding="regular"
      variant="lead"
    />
  );
}

Body left

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingRegularAlignmentLeftVariantBodyExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="two-columns-with-icons"
      padding="regular"
      variant="body"
    />
  );
}

Lead centered

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingRegularAlignmentCenterVariantLeadExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="two-columns-with-icons"
      padding="regular"
      variant="lead"
    />
  );
}

Body centered

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingRegularAlignmentCenterVariantBodyExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="two-columns-with-icons"
      padding="regular"
      variant="body"
    />
  );
}

Lead right

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingRegularAlignmentRightVariantLeadExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="two-columns-with-icons"
      padding="regular"
      variant="lead"
    />
  );
}

Body right

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingRegularAlignmentRightVariantBodyExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="two-columns-with-icons"
      padding="regular"
      variant="body"
    />
  );
}

Paragraph 2 columns with icons and large padding

Lead left

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingLargeAlignmentLeftVariantLeadExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="two-columns-with-icons"
      padding="large"
      variant="lead"
    />
  );
}

Body left

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingLargeAlignmentLeftVariantBodyExampleDemo() {
  return (
    <Content
      alignment="left"
      layout="two-columns-with-icons"
      padding="large"
      variant="body"
    />
  );
}

Lead centered

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingLargeAlignmentCenterVariantLeadExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="two-columns-with-icons"
      padding="large"
      variant="lead"
    />
  );
}

Body centered

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingLargeAlignmentCenterVariantBodyExampleDemo() {
  return (
    <Content
      alignment="center"
      layout="two-columns-with-icons"
      padding="large"
      variant="body"
    />
  );
}

Lead right

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingLargeAlignmentRightVariantLeadExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="two-columns-with-icons"
      padding="large"
      variant="lead"
    />
  );
}

Body right

import { Content } from "@/components/email/content";

export function ContentLayoutTwoColumnsWithIconsPaddingLargeAlignmentRightVariantBodyExampleDemo() {
  return (
    <Content
      alignment="right"
      layout="two-columns-with-icons"
      padding="large"
      variant="body"
    />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`layout`	`"title" \| "paragraph" \| "two-columns" \| "two-columns-with-icons"`	`"paragraph"`	Selects one of the four structural content layouts.
`padding`	`"regular" \| "large"`	`"regular"`	Uses 24px or 64px horizontal padding.
`alignment`	`"left" \| "center" \| "right"`	`"center"`	Aligns the title, paragraph, columns, and optional icons.
`variant`	`"small" \| "large" \| "lead" \| "body"`	`"lead"` for paragraph layouts; `"small"` for title	Selects the valid typography treatment for the chosen layout.
`title`	`string`	`"Stay in the loop by following us across our social channels."`	Title-layout text.
`text`	`string`	`"Lead text introduces the reader to the key message of an email..."`	Single-paragraph text.
`column1`	`string`	`"A brief introduction that highlights the key idea in a clear, engaging way."`	First column text.
`column2`	`string`	`"A brief introduction that highlights the key idea in a clear, engaging way."`	Second column text.
`iconSrc1`	`string`	`"https://cdn.simpleicons.org/github/111827"`	First icon source for the icon layout.
`iconAlt1`	`string`	`"GitHub"`	First icon alternative text.
`iconSrc2`	`string`	`"https://cdn.simpleicons.org/slack/4A154B"`	Second icon source for the icon layout.
`iconAlt2`	`string`	`"Slack"`	Second icon alternative text.

Podcast Coupons

On This Page

Installation Usage Examples Title with regular padding Left small Left large Centered small Centered large Right small Right large Title with large padding Left small Left large Centered small Centered large Right small Right large Paragraph with regular padding Lead left Body left Lead centered Body centered Lead right Body right Paragraph with large padding Lead left Body left Lead centered Body centered Lead right Body right Paragraph 2 columns with regular padding Lead left Body left Lead centered Body centered Lead right Body right Paragraph 2 columns with large padding Lead left Body left Lead centered Body centered Lead right Body right Paragraph 2 columns with icons and regular padding Lead left Body left Lead centered Body centered Lead right Body right Paragraph 2 columns with icons and large padding Lead left Body left Lead centered Body centered Lead right Body right API Reference

Edit this page Follow @shadcnlabs Join community