@emailcn

Beautiful emails, made simple. Ready to use, customizable email components for React.

250 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗ clone source (200 .json) ↗ clone brief (PROMPT.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://emailcn.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://emailcn.vercel.app/r/registry.json

bun bunx shadcn@latest add https://emailcn.vercel.app/r/registry.json

fetch registry curl -s https://emailcn.vercel.app/r/registry.json

Components

250 total

Airbnb Email Theme (React Email) file

Airbnb email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-airbnb.json

Apple Email Theme (React Email) file

Apple email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-apple.json

Default Email Theme (React Email) file

Default email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-default.json

Dropbox Email Theme (React Email) file

Dropbox email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-dropbox.json

Github Email Theme (React Email) file

Github email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-github.json

Linear Email Theme (React Email) file

Linear email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-linear.json

Nike Email Theme (React Email) file

Nike email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-nike.json

Notion Email Theme (React Email) file

Notion email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-notion.json

Raycast Email Theme (React Email) file

Raycast email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-raycast.json

Slack Email Theme (React Email) file

Slack email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-slack.json

Stack Overflow Email Theme (React Email) file

Stack Overflow email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-stack-overflow.json

Stripe Email Theme (React Email) file

Stripe email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-stripe.json

Twitch Email Theme (React Email) file

Twitch email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-twitch.json

Vercel Email Theme (React Email) file

Vercel email theme tokens for React Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-vercel.json

Collage Fonts (React Email) file

Inter weights for React Email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/collage-fonts.json

Email Default Fonts file

Inter webfont declarations for React Email templates (use inside Head)

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/default-fonts.json

Dither Fonts (React Email) file

IBM Plex Sans Condensed + Inter

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/dither-fonts.json

Skin Fonts (React Email) file

Instrument Serif + Inter

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/skin-fonts.json

Tech Fonts (React Email) file

Geist + Inter

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/tech-fonts.json

Category Preview component

Category Preview email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/category-preview.json

Billing Order Summary component

Billing Order Summary email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/billing-order-summary.json

Order Summary Table component

Order Summary Table email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/order-summary-table.json

Masonry Product Detail component

Masonry Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/masonry-product-detail.json

Single Image Product Detail component

Single Image Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/single-image-product-detail.json

Split Product Detail component

Ecommerce product-detail variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/split-product-detail.json

Three Image Product Detail component

Three Image Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/three-image-product-detail.json

Two Image Product Detail component

Two Image Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/two-image-product-detail.json

Product List component

Product List email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/product-list.json

Reviews component

Reviews email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/reviews.json

Shopping Cart component

Shopping Cart email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/shopping-cart.json

Bento Image Grid component

Bento Image Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/bento-image-grid.json

Bento Product Grid component

Bento Product Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/bento-product-grid.json

Bento Stats Grid component

Bento Stats Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/bento-stats-grid.json

Blog Grid component

Blog Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/blog-grid.json

Featured Blog Post component

Marketing blog variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/featured-blog-post.json

Horizontal Blog Post component

Horizontal Blog Post email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/horizontal-blog-post.json

Podcast Blog component

Podcast Blog email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/podcast-blog.json

Content component

Marketing content variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/content.json

Card Coupons component

Marketing coupons variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/card-coupons.json

Coupons With Centered Text component

Marketing coupons variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/coupons-with-centered-text.json

Coupons With Content Overlayed component

Marketing coupons variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/coupons-with-content-overlayed.json

Avatar Call To Action component

Avatar Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/avatar-call-to-action.json

Background Call To Action component

Background Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/background-call-to-action.json

Call To Action component

Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/call-to-action.json

Collage Call To Action component

Collage Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/collage-call-to-action.json

Image Strip Call To Action component

Image Strip Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/image-strip-call-to-action.json

Top Image Call To Action component

Top Image Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/top-image-call-to-action.json

Faq component

Faq email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/faq.json

Image Feature component

Image Feature email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/image-feature.json

Portrait Feature component

Portrait Feature email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/portrait-feature.json

Product Images Feature component

Product Images Feature email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/product-images-feature.json

Tall Background Images Feature component

Tall Background Images Feature email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/tall-background-images-feature.json

Navigation Footer component

Navigation Footer email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/navigation-footer.json

Promotion Footer component

Promotion Footer email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/promotion-footer.json

Utility Footer component

Utility Footer email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/utility-footer.json

Header With Logo And Badge component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-logo-and-badge.json

Header With Logo And Finance Stats component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-logo-and-finance-stats.json

Header With Logo And Menu component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-logo-and-menu.json

Header With Logo And Social Icons component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-logo-and-social-icons.json

Header With Logo component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-logo.json

Header With User Details component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-user-details.json

Image Grid Hero component

Image Grid Hero email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/image-grid-hero.json

Overlap Hero component

Overlap Hero email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/overlap-hero.json

Overlay Hero component

Overlay Hero email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/overlay-hero.json

Split Hero component

Split Hero email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/split-hero.json

Featured Image Grid component

Featured Image Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/featured-image-grid.json

Full Width Image component

Marketing images variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/full-width-image.json

Image Grid component

Image Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/image-grid.json

Masonry Image Grid component

Masonry Image Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/masonry-image-grid.json

Logo Cloud component

Logo Cloud email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/logo-cloud.json

Purchase Pricing component

Purchase Pricing email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/purchase-pricing.json

Subscription Pricing component

Subscription Pricing email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/subscription-pricing.json

Social Links component

Social Links email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/social-links.json

Collection Stats component

Collection Stats email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/collection-stats.json

Milestone Stats component

Marketing stats variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/milestone-stats.json

Spotlight Stats component

Spotlight Stats email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/spotlight-stats.json

Stacked Stats component

Marketing stats variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/stacked-stats.json

Team component

Team email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/team.json

Testimonial component

Testimonial email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/testimonial.json

Payment Timeline component

Marketing timelines variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/payment-timeline.json

Timeline component

Timeline email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/timeline.json

Avatar Details component

Avatar Details email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/avatar-details.json

Avatar Group component

Avatar Group email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/avatar-group.json

Button component

Button email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/button.json

Container component

UI Elements containers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/container.json

Data Table component

Data Table email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/data-table.json

Grid component

UI Elements grids variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/grid.json

Pills component

Pills email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/pills.json

Progress component

Progress email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/progress.json

Divider component

Divider email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/divider.json

Spacer component

Spacer email component

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/spacer.json

Auth Magic Link — Default block

Default magic link login email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-magic-link-default.json

Auth Magic Link — Raycast block

Raycast-style dark magic link login email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-magic-link-raycast.json

Auth Magic Link — Stripe block

Stripe-style magic link login email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-magic-link-stripe.json

Auth OTP — Default block

Default OTP verification code email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-otp-default.json

Auth OTP — Twitch block

Twitch-style OTP verification code email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-otp-twitch.json

Password Reset — Default block

Default password reset email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-password-reset-default.json

Password Reset — Dropbox block

Dropbox-style password reset email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-password-reset-dropbox.json

Password Reset — Notion block

Notion-style password reset email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-password-reset-notion.json

Team Invite — Default block

Default team invitation email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-invite-default.json

Team Invite — Vercel block

Vercel-style team invitation email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-invite-vercel.json

Newsletter — Default block

Default newsletter email with article grid

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-newsletter-default.json

Newsletter — Stack Overflow block

Stack Overflow-style newsletter with orange accent

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-newsletter-stack-overflow.json

Notification — Airbnb block

Airbnb review request notification

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-notification-airbnb.json

Notification — Default block

Default notification email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-notification-default.json

Notification — Linear block

Linear-style issue notification with issue number

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-notification-linear.json

Notification — Slack block

Slack workspace invite notification

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-notification-slack.json

Onboarding Email — Default block

Default welcome email with feature grid and CTA

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-onboarding-default.json

Onboarding Email — Linear block

Linear-style welcome email with feature grid and CTA

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-onboarding-linear.json

Onboarding Email — Vercel block

Dark Vercel-style welcome email with feature grid and CTA

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-onboarding-vercel.json

Receipt — Apple block

Apple-style receipt email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-receipt-apple.json

Receipt — Default block

Default receipt email with product cards and summary

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-receipt-default.json

Receipt — Nike block

Nike-style receipt email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-receipt-nike.json

Receipt — Stripe block

Stripe-style invoice receipt email

npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-receipt-stripe.json

Airbnb Email Theme (MJML) file

Airbnb email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-airbnb.json

Apple Email Theme (MJML) file

Apple email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-apple.json

Default Email Theme (MJML) file

Default email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-default.json

Dropbox Email Theme (MJML) file

Dropbox email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-dropbox.json

Github Email Theme (MJML) file

Github email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-github.json

Linear Email Theme (MJML) file

Linear email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-linear.json

Nike Email Theme (MJML) file

Nike email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-nike.json

Notion Email Theme (MJML) file

Notion email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-notion.json

Raycast Email Theme (MJML) file

Raycast email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-raycast.json

Slack Email Theme (MJML) file

Slack email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-slack.json

Stack Overflow Email Theme (MJML) file

Stack Overflow email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-stack-overflow.json

Stripe Email Theme (MJML) file

Stripe email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-stripe.json

Twitch Email Theme (MJML) file

Twitch email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-twitch.json

Vercel Email Theme (MJML) file

Vercel email theme tokens for MJML templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-vercel.json

Category Preview component

Category Preview email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/category-preview.json

Billing Order Summary component

Billing Order Summary email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/billing-order-summary.json

Order Summary Table component

Order Summary Table email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/order-summary-table.json

Masonry Product Detail component

Masonry Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/masonry-product-detail.json

Single Image Product Detail component

Single Image Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/single-image-product-detail.json

Split Product Detail component

Ecommerce product-detail variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/split-product-detail.json

Three Image Product Detail component

Three Image Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/three-image-product-detail.json

Two Image Product Detail component

Two Image Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/two-image-product-detail.json

Product List component

Product List email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/product-list.json

Reviews component

Reviews email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/reviews.json

Shopping Cart component

Shopping Cart email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/shopping-cart.json

Bento Image Grid component

Bento Image Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/bento-image-grid.json

Bento Product Grid component

Bento Product Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/bento-product-grid.json

Bento Stats Grid component

Bento Stats Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/bento-stats-grid.json

Blog Grid component

Blog Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/blog-grid.json

Featured Blog Post component

Marketing blog variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/featured-blog-post.json

Horizontal Blog Post component

Horizontal Blog Post email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/horizontal-blog-post.json

Podcast Blog component

Podcast Blog email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/podcast-blog.json

Content component

Marketing content variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/content.json

Card Coupons component

Marketing coupons variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/card-coupons.json

Coupons With Centered Text component

Marketing coupons variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/coupons-with-centered-text.json

Coupons With Content Overlayed component

Marketing coupons variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/coupons-with-content-overlayed.json

Avatar Call To Action component

Avatar Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/avatar-call-to-action.json

Background Call To Action component

Background Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/background-call-to-action.json

Call To Action component

Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/call-to-action.json

Collage Call To Action component

Collage Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/collage-call-to-action.json

Image Strip Call To Action component

Image Strip Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/image-strip-call-to-action.json

Top Image Call To Action component

Top Image Call To Action email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/top-image-call-to-action.json

Faq component

Faq email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/faq.json

Image Feature component

Image Feature email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/image-feature.json

Portrait Feature component

Portrait Feature email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/portrait-feature.json

Product Images Feature component

Product Images Feature email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/product-images-feature.json

Tall Background Images Feature component

Tall Background Images Feature email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/tall-background-images-feature.json

Navigation Footer component

Navigation Footer email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/navigation-footer.json

Promotion Footer component

Promotion Footer email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/promotion-footer.json

Utility Footer component

Utility Footer email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/utility-footer.json

Header With Logo And Badge component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-logo-and-badge.json

Header With Logo And Finance Stats component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-logo-and-finance-stats.json

Header With Logo And Menu component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-logo-and-menu.json

Header With Logo And Social Icons component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-logo-and-social-icons.json

Header With Logo component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-logo.json

Header With User Details component

Marketing headers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-user-details.json

Image Grid Hero component

Image Grid Hero email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/image-grid-hero.json

Overlap Hero component

Overlap Hero email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/overlap-hero.json

Overlay Hero component

Overlay Hero email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/overlay-hero.json

Split Hero component

Split Hero email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/split-hero.json

Featured Image Grid component

Featured Image Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/featured-image-grid.json

Full Width Image component

Marketing images variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/full-width-image.json

Image Grid component

Image Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/image-grid.json

Masonry Image Grid component

Masonry Image Grid email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/masonry-image-grid.json

Logo Cloud component

Logo Cloud email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/logo-cloud.json

Purchase Pricing component

Purchase Pricing email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/purchase-pricing.json

Subscription Pricing component

Subscription Pricing email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/subscription-pricing.json

Social Links component

Social Links email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/social-links.json

Collection Stats component

Collection Stats email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/collection-stats.json

Milestone Stats component

Marketing stats variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/milestone-stats.json

Spotlight Stats component

Spotlight Stats email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/spotlight-stats.json

Stacked Stats component

Marketing stats variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/stacked-stats.json

Team component

Team email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/team.json

Testimonial component

Testimonial email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/testimonial.json

Payment Timeline component

Marketing timelines variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/payment-timeline.json

Timeline component

Timeline email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/timeline.json

Avatar Details component

Avatar Details email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/avatar-details.json

Avatar Group component

Avatar Group email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/avatar-group.json

Button component

Button email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/button.json

Container component

UI Elements containers variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/container.json

Data Table component

Data Table email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/data-table.json

Grid component

UI Elements grids variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/grid.json

Pills component

Pills email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/pills.json

Progress component

Progress email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/progress.json

Divider component

Divider email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/divider.json

Spacer component

Spacer email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/spacer.json

Auth Magic Link — Default (MJML) block

Default magic link login email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-magic-link-default.json

Auth Magic Link — Raycast (MJML) block

Raycast-style dark magic link login email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-magic-link-raycast.json

Auth Magic Link — Stripe (MJML) block

Stripe-style magic link login email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-magic-link-stripe.json

Auth OTP — Default (MJML) block

Default OTP verification code email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-otp-default.json

Auth OTP — Twitch (MJML) block

Twitch-style OTP verification code email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-otp-twitch.json

Password Reset — Default (MJML) block

Default password reset email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-password-reset-default.json

Password Reset — Dropbox (MJML) block

Dropbox-style password reset email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-password-reset-dropbox.json

Password Reset — Notion (MJML) block

Notion-style password reset email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-password-reset-notion.json

Block Shared block

Block Shared email component

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-shared.json

Team Invite — Default (MJML) block

Default team invitation email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-invite-default.json

Team Invite — Vercel (MJML) block

Vercel-style team invitation email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-invite-vercel.json

Newsletter — Default (MJML) block

Default newsletter email with article grid

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-newsletter-default.json

Newsletter — Stack Overflow (MJML) block

Stack Overflow-style newsletter with orange accent

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-newsletter-stack-overflow.json

Notification — Airbnb (MJML) block

Airbnb review request notification

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-notification-airbnb.json

Notification — Default (MJML) block

Default notification email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-notification-default.json

Notification — Linear (MJML) block

Linear-style issue notification with issue number

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-notification-linear.json

Notification — Slack (MJML) block

Slack workspace invite notification

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-notification-slack.json

Onboarding Email — Default (MJML) block

Default welcome email with feature grid and CTA

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-onboarding-default.json

Onboarding Email — Linear (MJML) block

Linear-style welcome email with feature grid and CTA

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-onboarding-linear.json

Onboarding Email — Vercel (MJML) block

Dark Vercel-style welcome email with feature grid and CTA

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-onboarding-vercel.json

Receipt — Apple (MJML) block

Apple-style receipt email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-receipt-apple.json

Receipt — Default (MJML) block

Default receipt email with product cards and summary

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-receipt-default.json

Receipt — Nike (MJML) block

Nike-style receipt email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-receipt-nike.json

Receipt — Stripe (MJML) block

Stripe-style invoice receipt email

npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-receipt-stripe.json

Airbnb Email Theme (JSX Email) file

Airbnb email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-airbnb.json

Apple Email Theme (JSX Email) file

Apple email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-apple.json

Default Email Theme (JSX Email) file

Default email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-default.json

Dropbox Email Theme (JSX Email) file

Dropbox email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-dropbox.json

Github Email Theme (JSX Email) file

Github email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-github.json

Linear Email Theme (JSX Email) file

Linear email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-linear.json

Nike Email Theme (JSX Email) file

Nike email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-nike.json

Notion Email Theme (JSX Email) file

Notion email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-notion.json

Raycast Email Theme (JSX Email) file

Raycast email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-raycast.json

Slack Email Theme (JSX Email) file

Slack email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-slack.json

Stack Overflow Email Theme (JSX Email) file

Stack Overflow email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-stack-overflow.json

Stripe Email Theme (JSX Email) file

Stripe email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-stripe.json

Twitch Email Theme (JSX Email) file

Twitch email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-twitch.json

Vercel Email Theme (JSX Email) file

Vercel email theme tokens for JSX Email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-vercel.json

Collage Fonts (React Email) file

Inter weights for JSX Email

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/collage-fonts.json

Email Default Fonts file

Inter webfont declarations for JSX Email templates (use inside Head)

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/default-fonts.json

Dither Fonts (React Email) file

IBM Plex Sans Condensed + Inter

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/dither-fonts.json

Skin Fonts (React Email) file

Instrument Serif + Inter

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/skin-fonts.json

Tech Fonts (React Email) file

Geist + Inter

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/tech-fonts.json

Category Preview component

Category Preview email component

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/category-preview.json

Billing Order Summary component

Billing Order Summary email component

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/billing-order-summary.json

Order Summary Table component

Order Summary Table email component

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/order-summary-table.json

Masonry Product Detail component

Masonry Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/masonry-product-detail.json

Single Image Product Detail component

Single Image Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/single-image-product-detail.json

Split Product Detail component

Ecommerce product-detail variant for email templates

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/split-product-detail.json

Three Image Product Detail component

Three Image Product Detail email component

npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/three-image-product-detail.json