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.

Images

Image display components for showcasing photos and visual content.

React Email MJML React

Variants

Full Width Image

Image Banner

Image Card

Image Collage

Image Gallery

Image Grid

Hero Image

Rounded Image

Split Image

Triptych

Installation


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

Usage

import { FullWidthImage } from "@/components/emails/marketing/images/full-width-image";

<FullWidthImage {...FullWidthImage.PreviewProps} />

API Reference

Images

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

Hero Logos

On This Page

Variants Full Width Image Image Banner Image Card Image Collage Image Gallery Image Grid Hero Image Rounded Image Split Image Triptych Installation Usage API Reference Images

Edit this page Follow @shadcnlabs Join community