---
name: "@emailcn"
slug: "emailcn"
description: "Beautiful emails, made simple. Ready to use, customizable email components for React."
category: "Animated components"
tags: ["animation", "auth", "backgrounds", "blocks", "buttons", "cards", "cms", "e-commerce", "forms", "hooks", "icons", "loaders", "marketing", "media", "navigation", "onboarding", "overlays", "payments", "tables", "theming"]
framework: "react"
license: "MIT"
author: "shadcn-labs"
website: "https://emailcn.vercel.app"
github: "https://github.com/shadcn-labs/emailcn"
registry: "https://emailcn.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 290
component_count: 250
generated_at: "2026-09-21T01:50:16.753Z"
---

# @emailcn

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

## Links

- Website: https://emailcn.vercel.app
- GitHub: https://github.com/shadcn-labs/emailcn
- Registry JSON: https://emailcn.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/emailcn
- This file: https://sh4dcn.vercel.app/md/emailcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://emailcn.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://emailcn.vercel.app/r/registry.json
bunx shadcn@latest add https://emailcn.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/shadcn-labs/emailcn.git
# fetch the raw registry index
curl -s https://emailcn.vercel.app/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| react-email/theme-airbnb | registry:file | Airbnb email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-airbnb.json` |
| react-email/theme-apple | registry:file | Apple email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-apple.json` |
| react-email/theme-default | registry:file | Default email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-default.json` |
| react-email/theme-dropbox | registry:file | Dropbox email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-dropbox.json` |
| react-email/theme-github | registry:file | Github email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-github.json` |
| react-email/theme-linear | registry:file | Linear email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-linear.json` |
| react-email/theme-nike | registry:file | Nike email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-nike.json` |
| react-email/theme-notion | registry:file | Notion email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-notion.json` |
| react-email/theme-raycast | registry:file | Raycast email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-raycast.json` |
| react-email/theme-slack | registry:file | Slack email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-slack.json` |
| react-email/theme-stack-overflow | registry: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` |
| react-email/theme-stripe | registry:file | Stripe email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-stripe.json` |
| react-email/theme-twitch | registry:file | Twitch email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-twitch.json` |
| react-email/theme-vercel | registry:file | Vercel email theme tokens for React Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-vercel.json` |
| react-email/collage-fonts | registry:file | Inter weights for React Email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/collage-fonts.json` |
| react-email/default-fonts | registry: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` |
| react-email/dither-fonts | registry:file | IBM Plex Sans Condensed + Inter | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/dither-fonts.json` |
| react-email/skin-fonts | registry:file | Instrument Serif + Inter | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/skin-fonts.json` |
| react-email/tech-fonts | registry:file | Geist + Inter | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/tech-fonts.json` |
| react-email/category-preview | registry:component | Category Preview email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/category-preview.json` |
| react-email/billing-order-summary | registry:component | Billing Order Summary email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/billing-order-summary.json` |
| react-email/order-summary-table | registry:component | Order Summary Table email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/order-summary-table.json` |
| react-email/masonry-product-detail | registry:component | Masonry Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/masonry-product-detail.json` |
| react-email/single-image-product-detail | registry:component | Single Image Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/single-image-product-detail.json` |
| react-email/split-product-detail | registry:component | Ecommerce product-detail variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/split-product-detail.json` |
| react-email/three-image-product-detail | registry:component | Three Image Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/three-image-product-detail.json` |
| react-email/two-image-product-detail | registry:component | Two Image Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/two-image-product-detail.json` |
| react-email/product-list | registry:component | Product List email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/product-list.json` |
| react-email/reviews | registry:component | Reviews email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/reviews.json` |
| react-email/shopping-cart | registry:component | Shopping Cart email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/shopping-cart.json` |
| react-email/bento-image-grid | registry:component | Bento Image Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/bento-image-grid.json` |
| react-email/bento-product-grid | registry:component | Bento Product Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/bento-product-grid.json` |
| react-email/bento-stats-grid | registry:component | Bento Stats Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/bento-stats-grid.json` |
| react-email/blog-grid | registry:component | Blog Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/blog-grid.json` |
| react-email/featured-blog-post | registry:component | Marketing blog variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/featured-blog-post.json` |
| react-email/horizontal-blog-post | registry:component | Horizontal Blog Post email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/horizontal-blog-post.json` |
| react-email/podcast-blog | registry:component | Podcast Blog email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/podcast-blog.json` |
| react-email/content | registry:component | Marketing content variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/content.json` |
| react-email/card-coupons | registry:component | Marketing coupons variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/card-coupons.json` |
| react-email/coupons-with-centered-text | registry:component | Marketing coupons variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/coupons-with-centered-text.json` |
| react-email/coupons-with-content-overlayed | registry:component | Marketing coupons variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/coupons-with-content-overlayed.json` |
| react-email/avatar-call-to-action | registry:component | Avatar Call To Action email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/avatar-call-to-action.json` |
| react-email/background-call-to-action | registry:component | Background Call To Action email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/background-call-to-action.json` |
| react-email/call-to-action | registry:component | Call To Action email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/call-to-action.json` |
| react-email/collage-call-to-action | registry:component | Collage Call To Action email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/collage-call-to-action.json` |
| react-email/image-strip-call-to-action | registry: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` |
| react-email/top-image-call-to-action | registry: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` |
| react-email/faq | registry:component | Faq email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/faq.json` |
| react-email/image-feature | registry:component | Image Feature email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/image-feature.json` |
| react-email/portrait-feature | registry:component | Portrait Feature email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/portrait-feature.json` |
| react-email/product-images-feature | registry:component | Product Images Feature email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/product-images-feature.json` |
| react-email/tall-background-images-feature | registry:component | Tall Background Images Feature email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/tall-background-images-feature.json` |
| react-email/navigation-footer | registry:component | Navigation Footer email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/navigation-footer.json` |
| react-email/promotion-footer | registry:component | Promotion Footer email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/promotion-footer.json` |
| react-email/utility-footer | registry:component | Utility Footer email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/utility-footer.json` |
| react-email/header-with-logo-and-badge | registry:component | Marketing headers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-logo-and-badge.json` |
| react-email/header-with-logo-and-finance-stats | registry: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` |
| react-email/header-with-logo-and-menu | registry:component | Marketing headers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-logo-and-menu.json` |
| react-email/header-with-logo-and-social-icons | registry: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` |
| react-email/header-with-logo | registry:component | Marketing headers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-logo.json` |
| react-email/header-with-user-details | registry:component | Marketing headers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/header-with-user-details.json` |
| react-email/image-grid-hero | registry:component | Image Grid Hero email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/image-grid-hero.json` |
| react-email/overlap-hero | registry:component | Overlap Hero email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/overlap-hero.json` |
| react-email/overlay-hero | registry:component | Overlay Hero email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/overlay-hero.json` |
| react-email/split-hero | registry:component | Split Hero email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/split-hero.json` |
| react-email/featured-image-grid | registry:component | Featured Image Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/featured-image-grid.json` |
| react-email/full-width-image | registry:component | Marketing images variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/full-width-image.json` |
| react-email/image-grid | registry:component | Image Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/image-grid.json` |
| react-email/masonry-image-grid | registry:component | Masonry Image Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/masonry-image-grid.json` |
| react-email/logo-cloud | registry:component | Logo Cloud email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/logo-cloud.json` |
| react-email/purchase-pricing | registry:component | Purchase Pricing email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/purchase-pricing.json` |
| react-email/subscription-pricing | registry:component | Subscription Pricing email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/subscription-pricing.json` |
| react-email/social-links | registry:component | Social Links email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/social-links.json` |
| react-email/collection-stats | registry:component | Collection Stats email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/collection-stats.json` |
| react-email/milestone-stats | registry:component | Marketing stats variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/milestone-stats.json` |
| react-email/spotlight-stats | registry:component | Spotlight Stats email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/spotlight-stats.json` |
| react-email/stacked-stats | registry:component | Marketing stats variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/stacked-stats.json` |
| react-email/team | registry:component | Team email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/team.json` |
| react-email/testimonial | registry:component | Testimonial email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/testimonial.json` |
| react-email/payment-timeline | registry:component | Marketing timelines variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/payment-timeline.json` |
| react-email/timeline | registry:component | Timeline email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/timeline.json` |
| react-email/avatar-details | registry:component | Avatar Details email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/avatar-details.json` |
| react-email/avatar-group | registry:component | Avatar Group email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/avatar-group.json` |
| react-email/button | registry:component | Button email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/button.json` |
| react-email/container | registry:component | UI Elements containers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/container.json` |
| react-email/data-table | registry:component | Data Table email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/data-table.json` |
| react-email/grid | registry:component | UI Elements grids variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/grid.json` |
| react-email/pills | registry:component | Pills email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/pills.json` |
| react-email/progress | registry:component | Progress email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/progress.json` |
| react-email/divider | registry:component | Divider email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/divider.json` |
| react-email/spacer | registry:component | Spacer email component | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/spacer.json` |
| react-email/block-auth-magic-link-default | registry:block | Default magic link login email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-magic-link-default.json` |
| react-email/block-auth-magic-link-raycast | registry: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` |
| react-email/block-auth-magic-link-stripe | registry:block | Stripe-style magic link login email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-magic-link-stripe.json` |
| react-email/block-auth-otp-default | registry:block | Default OTP verification code email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-otp-default.json` |
| react-email/block-auth-otp-twitch | registry:block | Twitch-style OTP verification code email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-otp-twitch.json` |
| react-email/block-auth-password-reset-default | registry:block | Default password reset email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-password-reset-default.json` |
| react-email/block-auth-password-reset-dropbox | registry:block | Dropbox-style password reset email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-password-reset-dropbox.json` |
| react-email/block-auth-password-reset-notion | registry:block | Notion-style password reset email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-auth-password-reset-notion.json` |
| react-email/block-invite-default | registry:block | Default team invitation email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-invite-default.json` |
| react-email/block-invite-vercel | registry:block | Vercel-style team invitation email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-invite-vercel.json` |
| react-email/block-newsletter-default | registry:block | Default newsletter email with article grid | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-newsletter-default.json` |
| react-email/block-newsletter-stack-overflow | registry:block | Stack Overflow-style newsletter with orange accent | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-newsletter-stack-overflow.json` |
| react-email/block-notification-airbnb | registry:block | Airbnb review request notification | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-notification-airbnb.json` |
| react-email/block-notification-default | registry:block | Default notification email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-notification-default.json` |
| react-email/block-notification-linear | registry:block | Linear-style issue notification with issue number | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-notification-linear.json` |
| react-email/block-notification-slack | registry:block | Slack workspace invite notification | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-notification-slack.json` |
| react-email/block-onboarding-default | registry:block | Default welcome email with feature grid and CTA | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-onboarding-default.json` |
| react-email/block-onboarding-linear | registry: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` |
| react-email/block-onboarding-vercel | registry: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` |
| react-email/block-receipt-apple | registry:block | Apple-style receipt email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-receipt-apple.json` |
| react-email/block-receipt-default | registry:block | Default receipt email with product cards and summary | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-receipt-default.json` |
| react-email/block-receipt-nike | registry:block | Nike-style receipt email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-receipt-nike.json` |
| react-email/block-receipt-stripe | registry:block | Stripe-style invoice receipt email | `npx shadcn@latest add https://emailcn.vercel.app/r/react-email/block-receipt-stripe.json` |
| mjml-react/theme-airbnb | registry:file | Airbnb email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-airbnb.json` |
| mjml-react/theme-apple | registry:file | Apple email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-apple.json` |
| mjml-react/theme-default | registry:file | Default email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-default.json` |
| mjml-react/theme-dropbox | registry:file | Dropbox email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-dropbox.json` |
| mjml-react/theme-github | registry:file | Github email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-github.json` |
| mjml-react/theme-linear | registry:file | Linear email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-linear.json` |
| mjml-react/theme-nike | registry:file | Nike email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-nike.json` |
| mjml-react/theme-notion | registry:file | Notion email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-notion.json` |
| mjml-react/theme-raycast | registry:file | Raycast email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-raycast.json` |
| mjml-react/theme-slack | registry:file | Slack email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-slack.json` |
| mjml-react/theme-stack-overflow | registry:file | Stack Overflow email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-stack-overflow.json` |
| mjml-react/theme-stripe | registry:file | Stripe email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-stripe.json` |
| mjml-react/theme-twitch | registry:file | Twitch email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-twitch.json` |
| mjml-react/theme-vercel | registry:file | Vercel email theme tokens for MJML templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/theme-vercel.json` |
| mjml-react/category-preview | registry:component | Category Preview email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/category-preview.json` |
| mjml-react/billing-order-summary | registry:component | Billing Order Summary email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/billing-order-summary.json` |
| mjml-react/order-summary-table | registry:component | Order Summary Table email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/order-summary-table.json` |
| mjml-react/masonry-product-detail | registry:component | Masonry Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/masonry-product-detail.json` |
| mjml-react/single-image-product-detail | registry:component | Single Image Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/single-image-product-detail.json` |
| mjml-react/split-product-detail | registry:component | Ecommerce product-detail variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/split-product-detail.json` |
| mjml-react/three-image-product-detail | registry:component | Three Image Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/three-image-product-detail.json` |
| mjml-react/two-image-product-detail | registry:component | Two Image Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/two-image-product-detail.json` |
| mjml-react/product-list | registry:component | Product List email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/product-list.json` |
| mjml-react/reviews | registry:component | Reviews email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/reviews.json` |
| mjml-react/shopping-cart | registry:component | Shopping Cart email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/shopping-cart.json` |
| mjml-react/bento-image-grid | registry:component | Bento Image Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/bento-image-grid.json` |
| mjml-react/bento-product-grid | registry:component | Bento Product Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/bento-product-grid.json` |
| mjml-react/bento-stats-grid | registry:component | Bento Stats Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/bento-stats-grid.json` |
| mjml-react/blog-grid | registry:component | Blog Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/blog-grid.json` |
| mjml-react/featured-blog-post | registry:component | Marketing blog variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/featured-blog-post.json` |
| mjml-react/horizontal-blog-post | registry:component | Horizontal Blog Post email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/horizontal-blog-post.json` |
| mjml-react/podcast-blog | registry:component | Podcast Blog email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/podcast-blog.json` |
| mjml-react/content | registry:component | Marketing content variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/content.json` |
| mjml-react/card-coupons | registry:component | Marketing coupons variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/card-coupons.json` |
| mjml-react/coupons-with-centered-text | registry:component | Marketing coupons variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/coupons-with-centered-text.json` |
| mjml-react/coupons-with-content-overlayed | registry:component | Marketing coupons variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/coupons-with-content-overlayed.json` |
| mjml-react/avatar-call-to-action | registry:component | Avatar Call To Action email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/avatar-call-to-action.json` |
| mjml-react/background-call-to-action | registry:component | Background Call To Action email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/background-call-to-action.json` |
| mjml-react/call-to-action | registry:component | Call To Action email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/call-to-action.json` |
| mjml-react/collage-call-to-action | registry:component | Collage Call To Action email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/collage-call-to-action.json` |
| mjml-react/image-strip-call-to-action | registry: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` |
| mjml-react/top-image-call-to-action | registry: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` |
| mjml-react/faq | registry:component | Faq email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/faq.json` |
| mjml-react/image-feature | registry:component | Image Feature email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/image-feature.json` |
| mjml-react/portrait-feature | registry:component | Portrait Feature email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/portrait-feature.json` |
| mjml-react/product-images-feature | registry:component | Product Images Feature email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/product-images-feature.json` |
| mjml-react/tall-background-images-feature | registry:component | Tall Background Images Feature email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/tall-background-images-feature.json` |
| mjml-react/navigation-footer | registry:component | Navigation Footer email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/navigation-footer.json` |
| mjml-react/promotion-footer | registry:component | Promotion Footer email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/promotion-footer.json` |
| mjml-react/utility-footer | registry:component | Utility Footer email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/utility-footer.json` |
| mjml-react/header-with-logo-and-badge | registry:component | Marketing headers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-logo-and-badge.json` |
| mjml-react/header-with-logo-and-finance-stats | registry: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` |
| mjml-react/header-with-logo-and-menu | registry:component | Marketing headers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-logo-and-menu.json` |
| mjml-react/header-with-logo-and-social-icons | registry: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` |
| mjml-react/header-with-logo | registry:component | Marketing headers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-logo.json` |
| mjml-react/header-with-user-details | registry:component | Marketing headers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/header-with-user-details.json` |
| mjml-react/image-grid-hero | registry:component | Image Grid Hero email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/image-grid-hero.json` |
| mjml-react/overlap-hero | registry:component | Overlap Hero email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/overlap-hero.json` |
| mjml-react/overlay-hero | registry:component | Overlay Hero email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/overlay-hero.json` |
| mjml-react/split-hero | registry:component | Split Hero email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/split-hero.json` |
| mjml-react/featured-image-grid | registry:component | Featured Image Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/featured-image-grid.json` |
| mjml-react/full-width-image | registry:component | Marketing images variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/full-width-image.json` |
| mjml-react/image-grid | registry:component | Image Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/image-grid.json` |
| mjml-react/masonry-image-grid | registry:component | Masonry Image Grid email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/masonry-image-grid.json` |
| mjml-react/logo-cloud | registry:component | Logo Cloud email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/logo-cloud.json` |
| mjml-react/purchase-pricing | registry:component | Purchase Pricing email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/purchase-pricing.json` |
| mjml-react/subscription-pricing | registry:component | Subscription Pricing email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/subscription-pricing.json` |
| mjml-react/social-links | registry:component | Social Links email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/social-links.json` |
| mjml-react/collection-stats | registry:component | Collection Stats email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/collection-stats.json` |
| mjml-react/milestone-stats | registry:component | Marketing stats variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/milestone-stats.json` |
| mjml-react/spotlight-stats | registry:component | Spotlight Stats email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/spotlight-stats.json` |
| mjml-react/stacked-stats | registry:component | Marketing stats variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/stacked-stats.json` |
| mjml-react/team | registry:component | Team email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/team.json` |
| mjml-react/testimonial | registry:component | Testimonial email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/testimonial.json` |
| mjml-react/payment-timeline | registry:component | Marketing timelines variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/payment-timeline.json` |
| mjml-react/timeline | registry:component | Timeline email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/timeline.json` |
| mjml-react/avatar-details | registry:component | Avatar Details email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/avatar-details.json` |
| mjml-react/avatar-group | registry:component | Avatar Group email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/avatar-group.json` |
| mjml-react/button | registry:component | Button email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/button.json` |
| mjml-react/container | registry:component | UI Elements containers variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/container.json` |
| mjml-react/data-table | registry:component | Data Table email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/data-table.json` |
| mjml-react/grid | registry:component | UI Elements grids variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/grid.json` |
| mjml-react/pills | registry:component | Pills email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/pills.json` |
| mjml-react/progress | registry:component | Progress email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/progress.json` |
| mjml-react/divider | registry:component | Divider email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/divider.json` |
| mjml-react/spacer | registry:component | Spacer email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/spacer.json` |
| mjml-react/block-auth-magic-link-default | registry:block | Default magic link login email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-magic-link-default.json` |
| mjml-react/block-auth-magic-link-raycast | registry: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` |
| mjml-react/block-auth-magic-link-stripe | registry:block | Stripe-style magic link login email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-magic-link-stripe.json` |
| mjml-react/block-auth-otp-default | registry:block | Default OTP verification code email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-otp-default.json` |
| mjml-react/block-auth-otp-twitch | registry:block | Twitch-style OTP verification code email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-otp-twitch.json` |
| mjml-react/block-auth-password-reset-default | registry:block | Default password reset email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-password-reset-default.json` |
| mjml-react/block-auth-password-reset-dropbox | registry:block | Dropbox-style password reset email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-password-reset-dropbox.json` |
| mjml-react/block-auth-password-reset-notion | registry:block | Notion-style password reset email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-auth-password-reset-notion.json` |
| mjml-react/block-shared | registry:block | Block Shared email component | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-shared.json` |
| mjml-react/block-invite-default | registry:block | Default team invitation email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-invite-default.json` |
| mjml-react/block-invite-vercel | registry:block | Vercel-style team invitation email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-invite-vercel.json` |
| mjml-react/block-newsletter-default | registry:block | Default newsletter email with article grid | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-newsletter-default.json` |
| mjml-react/block-newsletter-stack-overflow | registry:block | Stack Overflow-style newsletter with orange accent | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-newsletter-stack-overflow.json` |
| mjml-react/block-notification-airbnb | registry:block | Airbnb review request notification | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-notification-airbnb.json` |
| mjml-react/block-notification-default | registry:block | Default notification email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-notification-default.json` |
| mjml-react/block-notification-linear | registry:block | Linear-style issue notification with issue number | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-notification-linear.json` |
| mjml-react/block-notification-slack | registry:block | Slack workspace invite notification | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-notification-slack.json` |
| mjml-react/block-onboarding-default | registry:block | Default welcome email with feature grid and CTA | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-onboarding-default.json` |
| mjml-react/block-onboarding-linear | registry: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` |
| mjml-react/block-onboarding-vercel | registry: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` |
| mjml-react/block-receipt-apple | registry:block | Apple-style receipt email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-receipt-apple.json` |
| mjml-react/block-receipt-default | registry:block | Default receipt email with product cards and summary | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-receipt-default.json` |
| mjml-react/block-receipt-nike | registry:block | Nike-style receipt email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-receipt-nike.json` |
| mjml-react/block-receipt-stripe | registry:block | Stripe-style invoice receipt email | `npx shadcn@latest add https://emailcn.vercel.app/r/mjml-react/block-receipt-stripe.json` |
| jsx-email/theme-airbnb | registry:file | Airbnb email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-airbnb.json` |
| jsx-email/theme-apple | registry:file | Apple email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-apple.json` |
| jsx-email/theme-default | registry:file | Default email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-default.json` |
| jsx-email/theme-dropbox | registry:file | Dropbox email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-dropbox.json` |
| jsx-email/theme-github | registry:file | Github email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-github.json` |
| jsx-email/theme-linear | registry:file | Linear email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-linear.json` |
| jsx-email/theme-nike | registry:file | Nike email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-nike.json` |
| jsx-email/theme-notion | registry:file | Notion email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-notion.json` |
| jsx-email/theme-raycast | registry:file | Raycast email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-raycast.json` |
| jsx-email/theme-slack | registry:file | Slack email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-slack.json` |
| jsx-email/theme-stack-overflow | registry: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` |
| jsx-email/theme-stripe | registry:file | Stripe email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-stripe.json` |
| jsx-email/theme-twitch | registry:file | Twitch email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-twitch.json` |
| jsx-email/theme-vercel | registry:file | Vercel email theme tokens for JSX Email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/theme-vercel.json` |
| jsx-email/collage-fonts | registry:file | Inter weights for JSX Email | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/collage-fonts.json` |
| jsx-email/default-fonts | registry: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` |
| jsx-email/dither-fonts | registry:file | IBM Plex Sans Condensed + Inter | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/dither-fonts.json` |
| jsx-email/skin-fonts | registry:file | Instrument Serif + Inter | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/skin-fonts.json` |
| jsx-email/tech-fonts | registry:file | Geist + Inter | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/tech-fonts.json` |
| jsx-email/category-preview | registry:component | Category Preview email component | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/category-preview.json` |
| jsx-email/billing-order-summary | registry:component | Billing Order Summary email component | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/billing-order-summary.json` |
| jsx-email/order-summary-table | registry:component | Order Summary Table email component | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/order-summary-table.json` |
| jsx-email/masonry-product-detail | registry:component | Masonry Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/masonry-product-detail.json` |
| jsx-email/single-image-product-detail | registry:component | Single Image Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/single-image-product-detail.json` |
| jsx-email/split-product-detail | registry:component | Ecommerce product-detail variant for email templates | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/split-product-detail.json` |
| jsx-email/three-image-product-detail | registry:component | Three Image Product Detail email component | `npx shadcn@latest add https://emailcn.vercel.app/r/jsx-email/three-image-product-detail.json` |

## For AI agents

```text
You are adding components from @emailcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/emailcn.md) for the component list.
2. Fetch the machine-readable index: https://emailcn.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: emailcn).
```