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.

Blog

Blog post layouts for email newsletters and content digests.

React Email MJML React

Variants

Blog Card

Blog Compact

Blog CTA Banner

Blog Dark

Blog Featured

Blog Grid

Blog Horizontal

Blog Image Card

Blog List

Blog Minimal

Blog Single Column

Blog Three Column

Blog with CTA

Installation


$ pnpm dlx shadcn@latest add @emailcn/mjml-blog

Usage

import { FeaturedBlogPost } from "@/components/emails/marketing/blog/featured-blog-post";

<FeaturedBlogPost {...FeaturedBlogPost.PreviewProps} />

API Reference

Blog

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

Bento Grids Content Grid