A collection of beautifully designed, accessible, and customizable email components. Built on React 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 Grid

Content grid layouts for paragraphs, titles, and mixed content in emails.

React Email MJML React

Variants

Paragraph with Regular Padding

Paragraph with Large Padding

Paragraph 2 Columns with Regular Padding

Paragraph 2 Columns with Large Padding

Paragraph 2 Columns with Icons and Regular Padding

Paragraph 2 Columns with Icons and Large Padding

Title with Regular Padding

Title with Large Padding

Installation


$ pnpm dlx shadcn@latest add @emailcn/content-grid

Usage

import { ParagraphWithRegularPadding } from "@/components/emails/marketing/content/paragraph-with-regular-padding";

<ParagraphWithRegularPadding {...ParagraphWithRegularPadding.PreviewProps} />

API Reference

Content Grid

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Email theme styling

Blog Coupons

On This Page

Variants Paragraph with Regular Padding Paragraph with Large Padding Paragraph 2 Columns with Regular Padding Paragraph 2 Columns with Large Padding Paragraph 2 Columns with Icons and Regular Padding Paragraph 2 Columns with Icons and Large Padding Title with Regular Padding Title with Large Padding Installation Usage API Reference Content Grid

Edit this page Follow @shadcnlabs Join community