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, icons, and mixed content in emails.

React Email MJML React

Variants

Text Only

Bordered Content Grid

Dark Content Grid

Icon Row

Mixed Content Grid

Three Column Content Grid

Two Column Content Grid

Content Grid with CTA

Installation


$ pnpm dlx shadcn@latest add @emailcn/mjml-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 Text Only Bordered Content Grid Dark Content Grid Icon Row Mixed Content Grid Three Column Content Grid Two Column Content Grid Content Grid with CTA Installation Usage API Reference Content Grid

Edit this page Follow @shadcnlabs Join community