ActiveAnimated components290
@emailcn
Animated components · MIT · data updated 2026-09-21
Beautiful emails, made simple. Ready to use, customizable email components for React.
animationauthbackgroundsblocksbuttonscardscmse-commerceformshooksiconsloadersmarketingmedianavigationonboardingoverlayspaymentstablestheming
Install
npx shadcn@latest add https://emailcn.vercel.app/r/registry.jsonHealth
StatusActive
Last committoday
LicenseMIT
Open issues1
ArchivedNo
Stars290
Components (338)
react-email/theme-airbnbreact-email/theme-applereact-email/theme-defaultreact-email/theme-dropboxreact-email/theme-githubreact-email/theme-linearreact-email/theme-nikereact-email/theme-notionreact-email/theme-raycastreact-email/theme-slackreact-email/theme-stack-overflowreact-email/theme-stripereact-email/theme-twitchreact-email/theme-vercelreact-email/collage-fontsreact-email/default-fontsreact-email/dither-fontsreact-email/skin-fontsreact-email/tech-fontsreact-email/category-previewreact-email/billing-order-summaryreact-email/order-summary-tablereact-email/masonry-product-detailreact-email/single-image-product-detailreact-email/split-product-detailreact-email/three-image-product-detailreact-email/two-image-product-detailreact-email/product-listreact-email/reviewsreact-email/shopping-cartreact-email/bento-image-gridreact-email/bento-product-gridreact-email/bento-stats-gridreact-email/blog-gridreact-email/featured-blog-postreact-email/horizontal-blog-postreact-email/podcast-blogreact-email/contentreact-email/card-couponsreact-email/coupons-with-centered-textreact-email/coupons-with-content-overlayedreact-email/avatar-call-to-actionreact-email/background-call-to-actionreact-email/call-to-actionreact-email/collage-call-to-actionreact-email/image-strip-call-to-actionreact-email/top-image-call-to-actionreact-email/faqreact-email/image-featurereact-email/portrait-featurereact-email/product-images-featurereact-email/tall-background-images-featurereact-email/navigation-footerreact-email/promotion-footerreact-email/utility-footerreact-email/header-with-logo-and-badgereact-email/header-with-logo-and-finance-statsreact-email/header-with-logo-and-menureact-email/header-with-logo-and-social-iconsreact-email/header-with-logo
Components: react-email/theme-airbnb, react-email/theme-apple, react-email/theme-default, react-email/theme-dropbox, react-email/theme-github, react-email/theme-linear, react-email/theme-nike, react-email/theme-notion, react-email/theme-raycast, react-email/theme-slack, react-email/theme-stack-overflow, react-email/theme-stripe, react-email/theme-twitch, react-email/theme-vercel, react-email/collage-fonts, react-email/default-fonts, react-email/dither-fonts, react-email/skin-fonts, react-email/tech-fonts, react-email/category-preview, react-email/billing-order-summary, react-email/order-summary-table, react-email/masonry-product-detail, react-email/single-image-product-detail, react-email/split-product-detail, react-email/three-image-product-detail, react-email/two-image-product-detail, react-email/product-list, react-email/reviews, react-email/shopping-cart, react-email/bento-image-grid, react-email/bento-product-grid, react-email/bento-stats-grid, react-email/blog-grid, react-email/featured-blog-post, react-email/horizontal-blog-post, react-email/podcast-blog, react-email/content, react-email/card-coupons, react-email/coupons-with-centered-text, react-email/coupons-with-content-overlayed, react-email/avatar-call-to-action, react-email/background-call-to-action, react-email/call-to-action, react-email/collage-call-to-action, react-email/image-strip-call-to-action, react-email/top-image-call-to-action, react-email/faq, react-email/image-feature, react-email/portrait-feature, react-email/product-images-feature, react-email/tall-background-images-feature, react-email/navigation-footer, react-email/promotion-footer, react-email/utility-footer, react-email/header-with-logo-and-badge, react-email/header-with-logo-and-finance-stats, react-email/header-with-logo-and-menu, react-email/header-with-logo-and-social-icons, react-email/header-with-logo, react-email/header-with-user-details, react-email/image-grid-hero, react-email/overlap-hero, react-email/overlay-hero, react-email/split-hero, react-email/featured-image-grid, react-email/full-width-image, react-email/image-grid, react-email/masonry-image-grid, react-email/logo-cloud, react-email/purchase-pricing, react-email/subscription-pricing, react-email/social-links, react-email/collection-stats, react-email/milestone-stats, react-email/spotlight-stats, react-email/stacked-stats, react-email/team, react-email/testimonial, react-email/payment-timeline, react-email/timeline, react-email/avatar-details, react-email/avatar-group, react-email/button, react-email/container, react-email/data-table, react-email/grid, react-email/pills, react-email/progress, react-email/divider, react-email/spacer, react-email/block-auth-magic-link-default, react-email/block-auth-magic-link-raycast, react-email/block-auth-magic-link-stripe, react-email/block-auth-otp-default, react-email/block-auth-otp-twitch, react-email/block-auth-password-reset-default, react-email/block-auth-password-reset-dropbox, react-email/block-auth-password-reset-notion, react-email/block-invite-default, react-email/block-invite-vercel, react-email/block-newsletter-default, react-email/block-newsletter-stack-overflow, react-email/block-notification-airbnb, react-email/block-notification-default, react-email/block-notification-linear, react-email/block-notification-slack, react-email/block-onboarding-default, react-email/block-onboarding-linear, react-email/block-onboarding-vercel, react-email/block-receipt-apple, react-email/block-receipt-default, react-email/block-receipt-nike, react-email/block-receipt-stripe, mjml-react/theme-airbnb, mjml-react/theme-apple, mjml-react/theme-default, mjml-react/theme-dropbox, mjml-react/theme-github, mjml-react/theme-linear, mjml-react/theme-nike, mjml-react/theme-notion, mjml-react/theme-raycast, mjml-react/theme-slack, mjml-react/theme-stack-overflow, mjml-react/theme-stripe, mjml-react/theme-twitch, mjml-react/theme-vercel, mjml-react/category-preview, mjml-react/billing-order-summary, mjml-react/order-summary-table, mjml-react/masonry-product-detail, mjml-react/single-image-product-detail, mjml-react/split-product-detail, mjml-react/three-image-product-detail, mjml-react/two-image-product-detail, mjml-react/product-list, mjml-react/reviews, mjml-react/shopping-cart, mjml-react/bento-image-grid, mjml-react/bento-product-grid, mjml-react/bento-stats-grid, mjml-react/blog-grid, mjml-react/featured-blog-post, mjml-react/horizontal-blog-post, mjml-react/podcast-blog, mjml-react/content, mjml-react/card-coupons, mjml-react/coupons-with-centered-text, mjml-react/coupons-with-content-overlayed, mjml-react/avatar-call-to-action, mjml-react/background-call-to-action, mjml-react/call-to-action, mjml-react/collage-call-to-action, mjml-react/image-strip-call-to-action, mjml-react/top-image-call-to-action, mjml-react/faq, mjml-react/image-feature, mjml-react/portrait-feature, mjml-react/product-images-feature, mjml-react/tall-background-images-feature, mjml-react/navigation-footer, mjml-react/promotion-footer, mjml-react/utility-footer, mjml-react/header-with-logo-and-badge, mjml-react/header-with-logo-and-finance-stats, mjml-react/header-with-logo-and-menu, mjml-react/header-with-logo-and-social-icons, mjml-react/header-with-logo, mjml-react/header-with-user-details, mjml-react/image-grid-hero, mjml-react/overlap-hero, mjml-react/overlay-hero, mjml-react/split-hero, mjml-react/featured-image-grid, mjml-react/full-width-image, mjml-react/image-grid, mjml-react/masonry-image-grid, mjml-react/logo-cloud, mjml-react/purchase-pricing, mjml-react/subscription-pricing, mjml-react/social-links, mjml-react/collection-stats, mjml-react/milestone-stats, mjml-react/spotlight-stats, mjml-react/stacked-stats, mjml-react/team, mjml-react/testimonial, mjml-react/payment-timeline, mjml-react/timeline, mjml-react/avatar-details, mjml-react/avatar-group, mjml-react/button, mjml-react/container, mjml-react/data-table, mjml-react/grid, mjml-react/pills, mjml-react/progress, mjml-react/divider, mjml-react/spacer, mjml-react/block-auth-magic-link-default, mjml-react/block-auth-magic-link-raycast, mjml-react/block-auth-magic-link-stripe, mjml-react/block-auth-otp-default, mjml-react/block-auth-otp-twitch, mjml-react/block-auth-password-reset-default, mjml-react/block-auth-password-reset-dropbox, mjml-react/block-auth-password-reset-notion, mjml-react/block-shared, mjml-react/block-invite-default, mjml-react/block-invite-vercel, mjml-react/block-newsletter-default, mjml-react/block-newsletter-stack-overflow, mjml-react/block-notification-airbnb, mjml-react/block-notification-default, mjml-react/block-notification-linear, mjml-react/block-notification-slack, mjml-react/block-onboarding-default, mjml-react/block-onboarding-linear, mjml-react/block-onboarding-vercel, mjml-react/block-receipt-apple, mjml-react/block-receipt-default, mjml-react/block-receipt-nike, mjml-react/block-receipt-stripe, jsx-email/theme-airbnb, jsx-email/theme-apple, jsx-email/theme-default, jsx-email/theme-dropbox, jsx-email/theme-github, jsx-email/theme-linear, jsx-email/theme-nike, jsx-email/theme-notion, jsx-email/theme-raycast, jsx-email/theme-slack, jsx-email/theme-stack-overflow, jsx-email/theme-stripe, jsx-email/theme-twitch, jsx-email/theme-vercel, jsx-email/collage-fonts, jsx-email/default-fonts, jsx-email/dither-fonts, jsx-email/skin-fonts, jsx-email/tech-fonts, jsx-email/category-preview, jsx-email/billing-order-summary, jsx-email/order-summary-table, jsx-email/masonry-product-detail, jsx-email/single-image-product-detail, jsx-email/split-product-detail, jsx-email/three-image-product-detail, jsx-email/two-image-product-detail, jsx-email/product-list, jsx-email/reviews, jsx-email/shopping-cart, jsx-email/bento-image-grid, jsx-email/bento-product-grid, jsx-email/bento-stats-grid, jsx-email/blog-grid, jsx-email/featured-blog-post, jsx-email/horizontal-blog-post, jsx-email/podcast-blog, jsx-email/content, jsx-email/card-coupons, jsx-email/coupons-with-centered-text, jsx-email/coupons-with-content-overlayed, jsx-email/avatar-call-to-action, jsx-email/background-call-to-action, jsx-email/call-to-action, jsx-email/collage-call-to-action, jsx-email/image-strip-call-to-action, jsx-email/top-image-call-to-action, jsx-email/faq, jsx-email/image-feature, jsx-email/portrait-feature, jsx-email/product-images-feature, jsx-email/tall-background-images-feature, jsx-email/navigation-footer, jsx-email/promotion-footer, jsx-email/utility-footer, jsx-email/header-with-logo-and-badge, jsx-email/header-with-logo-and-finance-stats, jsx-email/header-with-logo-and-menu, jsx-email/header-with-logo-and-social-icons, jsx-email/header-with-logo, jsx-email/header-with-user-details, jsx-email/image-grid-hero, jsx-email/overlap-hero, jsx-email/overlay-hero, jsx-email/split-hero, jsx-email/featured-image-grid, jsx-email/full-width-image, jsx-email/image-grid, jsx-email/masonry-image-grid, jsx-email/logo-cloud, jsx-email/purchase-pricing, jsx-email/subscription-pricing, jsx-email/social-links, jsx-email/collection-stats, jsx-email/milestone-stats, jsx-email/spotlight-stats, jsx-email/stacked-stats, jsx-email/team, jsx-email/testimonial, jsx-email/payment-timeline, jsx-email/timeline, jsx-email/avatar-details, jsx-email/avatar-group, jsx-email/button, jsx-email/container, jsx-email/data-table, jsx-email/grid, jsx-email/pills, jsx-email/progress, jsx-email/divider, jsx-email/spacer, jsx-email/block-auth-magic-link-default, jsx-email/block-auth-magic-link-raycast, jsx-email/block-auth-magic-link-stripe, jsx-email/block-auth-otp-default, jsx-email/block-auth-otp-twitch, jsx-email/block-auth-password-reset-default, jsx-email/block-auth-password-reset-dropbox, jsx-email/block-auth-password-reset-notion, jsx-email/block-invite-default, jsx-email/block-invite-vercel, jsx-email/block-newsletter-default, jsx-email/block-newsletter-stack-overflow, jsx-email/block-notification-airbnb, jsx-email/block-notification-default, jsx-email/block-notification-linear, jsx-email/block-notification-slack, jsx-email/block-onboarding-default, jsx-email/block-onboarding-linear, jsx-email/block-onboarding-vercel, jsx-email/block-receipt-apple, jsx-email/block-receipt-default, jsx-email/block-receipt-nike, jsx-email/block-receipt-stripePreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@emailcn · react-email/theme-airbnb
npx shadcn@latest add https://emailcn.vercel.app/r/react-email/theme-airbnb.jsonView source