Does react-email auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

react-email

💌 Build and send emails using React

FLOW.md

resend@resend

GitHub

Plugin Signal68/100Solid

maintained99

capable14

documented75

adopted91

Install

$ npx -y skills add resend/react-email --agent claude-code

Run the curl in your terminal, the rest in Claude Code.

Stats

TypeScript React Tailwind HTML AWS

+3 tags

Azure GitHub Markdown

19,581

Stars

1,075

Forks

Active

Maintenance

TypeScript

Language

MIT

License

1d ago

Last commit

3y ago

Created

Repo: resend/react-email

In this plugin

1 skill

- react-email

See everything inside

What's inside

Skills

/react-emailUse when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations,

Badges

README

Read on GitHub

React email cover

Introduction

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript. It reduces the pain of coding responsive emails with dark mode support. It also takes care of inconsistencies between Gmail, Outlook, and other email clients for you.

Why

We believe that email is an extremely important medium for people to communicate. However, we need to stop developing emails like 2010, and rethink how email can be done in 2026 and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today.

Install

npm i react-email@latest

Getting started

Define your email template with React, include styles and our components where needed.

import { Button } from "react-email";

export default function Email() {
  return (
    <Button href="https://example.com" style={{ color: "#61dafb" }}>
      Click me
    </Button>
  );
};

Components

A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.

Editor

React Email also provides an Editor built on top of TipTap and ProseMirror, It serializes to React Email components, and exports email-ready HTML and plain text.

See the Editor documentation for more details.

Integrations

Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples:

Support

All components were tested using the most popular email clients.


Gmail ✔	Apple Mail ✔	Outlook ✔	Yahoo! Mail ✔	HEY ✔	Superhuman ✔

Development workflow

Contributing

Contribution Guide

Brought to you by Resend, MIT License.

File tree

1629

resend/react-emailView on GitHub

.changeset/
  config.json
  README.md
.github/
  CODEOWNERS
  DISCUSSION_TEMPLATE/
    help.yml
    ideas.yml
  ISSUE_TEMPLATE/
    1.bug_report.yml
    config.yml
  pull_request_template.md
  workflows/
    bump.yml
    e2e.yml
    lint.yml
    pin-dependencies-check.yml
    preview-release.yml
    pull-request-title-check.yml
    release.yml
    sync-prs-to-linear.yml
    sync-skills.yml
    tests.yml
    typecheck.yml
.gitignore
.vscode/
  settings.json
apps/
  demo/
    .gitignore
    emails/
      01-Barebone/
        activation.tsx
        feature-announcement.tsx
        password-reset.tsx
        product-update.tsx
        subscription-confirmation.tsx
        subscription-update.tsx
        text-only.tsx
        theme-fonts.tsx
        theme.ts
        welcome.tsx
      02-Matte/
        activation.tsx
        collage-fonts.tsx
        feature-announcement.tsx
        password-reset.tsx
        product-update.tsx
        subscription-confirmation.tsx
        subscription-update.tsx
        text-only.tsx
        theme.ts
        welcome.tsx
      03-Protocol/
        activation.tsx
        dither-fonts.tsx
        feature-announcement.tsx
        password-reset.tsx
        product-update.tsx
        subscription-confirmation.tsx
        subscription-update.tsx
        text-only.tsx
        theme.ts
        welcome.tsx
      04-Arcane/
        abandoned-cart.tsx
        activation.tsx
        newsletter.tsx
        order-confirmation.tsx
        order-shipping.tsx
        password-reset.tsx
        promo.tsx
        skin-fonts.tsx
        theme.ts
        welcome.tsx
      05-Studio/
        abandoned-cart.tsx
        activation.tsx
        newsletter.tsx
        order-confirmation.tsx
        order-shipping.tsx
        password-reset.tsx
        promo.tsx
        tech-fonts.tsx
        theme.ts
        welcome.tsx
      Community/
        magic-links/
          aws-verify-email.tsx
          linear-login-code.tsx
          notion-magic-link.tsx
          plaid-verify-identity.tsx
          raycast-magic-link.tsx
          slack-confirm.tsx
        newsletters/
          codepen-challengers.tsx
          google-play-policy-update.tsx
          stack-overflow-tips.tsx
        notifications/
          github-access-token.tsx
          papermark-year-in-review.tsx
          vercel-invite-user.tsx
          yelp-recent-login.tsx
        receipts/
          apple-receipt.tsx
          nike-receipt.tsx
        reset-password/
          dropbox-reset-password.tsx
          twitch-reset-password.tsx
        reviews/
          airbnb-review.tsx
          amazon-review.tsx
        welcome/
          koala-welcome.tsx
          netlify-welcome.tsx
          stripe-welcome.tsx
      static/
        airbnb-logo.png
        airbnb-review-user.jpg
        amazon-book.jpg
        amazon-facebook.jpg
        amazon-instagram.jpg
        amazon-logo.png
        amazon-prime-logo.png
        amazon-rating.gif
        amazon-twitter.jpg
        apple-card-icon.png
        apple-hbo-max-icon.jpeg
        apple-logo.png
        apple-wallet.png
        aws-logo.png
        barebones/
          barebones-image-2.png
          barebones-image-3.png
          barebones-image.png
        codepen-challengers.png
        codepen-cube.png
        codepen-pro.png
        collage/
          collage-button-bg.png
          collage-image-1.png
          collage-image-2.png
          collage-image-3.png
          collage-image-4.png
          collage-image-5.png
          collage-image-6.png
          collage-image-7.png
          collage-image-8.png
          collage-image-9.png
        dither/
          dither-image-1.png
          dither-image-2.png
          dither-image-3.png
          dither-image-4.png
          dither-image-5.png
          dither-image-6.png
          dither-image-7.png
        dropbox-logo.png
        github.png
        google-play-academy.png
        google-play-chat.png
        google-play-footer.png
        google-play-header.png
        google-play-icon.png
        google-play-logo.png
        google-play-pl.png
        google-play.png
        koala-logo.png
        linear-logo.png
        netlify-logo.png
        nike-logo.png
        nike-phone.png
        nike-product.png
        nike-recomendation-1.png
        nike-recomendation-2.png
        nike-recomendation-3.png
        nike-recomendation-4.png
        notion-logo.png
        plaid-logo.png
        raycast-bg.png
        raycast-logo.png
        shared/
          brand-dark-feature-1.png
          brand-dark-welcome-1.jpg
          graphite-saas-image.jpg
          key-linework.png
          logo-black.png
          logo-white.png
          logo-wordmark-black.png
          logo.png
          minimal-earth-hero.jpg
          social-gh-black.png
          social-gh-white.png
          social-in-black.png
          social-li-white.png
          social-x-black.png
          social-x-white.png
          social-yt-black.png
          social-yt-white.png
          timeless-image.png
        skin/
          skin-image-1.png
          skin-image-10.png
          skin-image-2.png
          skin-image-3.png
          skin-image-4.png
          skin-image-5.png
          skin-image-6.png
          skin-image-7.png
          skin-image-9.png
          skins-image-8.png
          social-gh.png
          social-li.png
          social-x.png
          social-yt.png
        slack-facebook.png
        slack-linkedin.png
        slack-logo.png
        slack-twitter.png
        stack-overflow-header.png
        stack-overflow-logo-sm.png
        stack-overflow-logo.png
        stripe-logo.png
        tech/
          logo-wordmark.png
          tech-image-2.png
          tech-image-3.png
          tech-image-4.png
          tech-image-5.png
          tech-image-6.png
          tech-image.png
        twitch-icon-facebook.png
        twitch-icon-twitter.png
        twitch-logo.png
        vercel-arrow.png
        vercel-logo.png
        vercel-team.png
        vercel-user.png
        yelp-footer.png
        yelp-header.png
        yelp-logo.png
      tailwind.config.ts
    license.md
    package.json
    tsconfig.json
  docs/
    changelog.mdx
    cli.mdx
    components/
      body.mdx
      button.mdx
      code-block.mdx
      code-inline.mdx
      column.mdx
      container.mdx
      font.mdx
      head.mdx
      heading.mdx
      hr.mdx
      html.mdx
      image.mdx
      link.mdx
      markdown.mdx
      preview.mdx
      row.mdx
      section.mdx
      tailwind.mdx
      text.mdx
    contributing/
    contributing.mdx
      codebase-overview.mdx
      development-workflow/
        1-setup.mdx
        2-running-tests.mdx
        3-linting.mdx
        4-building.mdx
        5-writing-docs.mdx
        6-editing-the-components.mdx
      introduction.mdx
      opening-issues.mdx
      opening-pull-requests.mdx
    deployment.mdx
    docs.json
    editor/
      advanced/
        custom-extensions.mdx
        event-bus.mdx
        extensions.mdx
      api-reference/
        compose-react-email.mdx
        email-editor.mdx
        email-mark.mdx
        email-node.mdx
        extensions-list.mdx
        image-upload-api.mdx
        theming-api.mdx
        ui/
          bubble-menu.mdx
          editor-focus-scope.mdx
          inspector.mdx
          slash-command.mdx
        use-editor.mdx
      features/
        bubble-menu.mdx
        buttons.mdx
        column-layouts.mdx
        email-export.mdx
        image-upload.mdx
        inspector.mdx
        link-editing.mdx
        slash-commands.mdx
        styling.mdx
        theming.mdx
      getting-started.mdx
      overview.mdx
    favicon.png
    getting-started/
      automatic-setup.mdx
      manual-setup.mdx
      migrating-to-react-email.mdx
      monorepo-setup/
        bun.mdx
        choose-package-manager.mdx
        npm.mdx
        pnpm.mdx
        yarn.mdx
      updating-react-email.mdx
    guides/
      internationalization/
        next-intl.mdx
        react-i18next.mdx
        react-intl.mdx
    images/
      automatic-setup-dev.png
      background.png
      bg.png
      manual-setup-dev.png
      preview-server-vercel-settings.png
    integrations/
      aws-ses.mdx
      azure-communication-email.mdx
      inbound.mdx
      mailersend.mdx
      mailgun.mdx
      nodemailer.mdx
      overview.mdx
      plunk.mdx
      postmark.mdx
      resend.mdx
      scaleway.mdx
      sendgrid.mdx
    introduction.mdx
    license.md
    logo/
      dark.svg
      light.svg
    package.json
    roadmap.mdx
    snippets/
      editor-install.mdx
      editor-next-steps.mdx
      integrations.mdx
      localdev.mdx
      next-steps.mdx
      support.mdx
    style.css
    utilities/
      render.mdx
  web/
    .gitignore
    .vscode/
      settings.json
    components/
      _components/
        layout.tsx
      article-with-image/
      article-with-image-as-background/
        inline-styles.tsx
        tailwind.tsx
      article-with-image-on-right/
        inline-styles.tsx
        tailwind.tsx
        inline-styles.tsx
        tailwind.tsx
      article-with-multiple-authors/
        inline-styles.tsx
        tailwind.tsx
      article-with-single-author/
        inline-styles.tsx
        tailwind.tsx
      article-with-two-cards/
        inline-styles.tsx
        tailwind.tsx
      avatars-circular/
        inline-styles.tsx
        tailwind.tsx
      avatars-group-stacked/
        inline-styles.tsx
        tailwind.tsx
      avatars-rounded/
... 1600 more

Showing a partial view of a very large repo.

FAQ

react-email is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes react-email. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is react-email?: 💌 Build and send emails using React
How do I install react-email?: Run these in Claude Code: npx -y skills add resend/react-email --agent claude-code. Then prompt normally.
Does react-email auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is react-email free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Components

A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.

Gmail ✔

Apple Mail ✔

Outlook ✔

Yahoo! Mail ✔

HEY ✔

Superhuman ✔

.changeset/ config.json README.md .github/ CODEOWNERS DISCUSSION_TEMPLATE/ help.yml ideas.yml ISSUE_TEMPLATE/ 1.bug_report.yml config.yml pull_request_template.md workflows/ bump.yml e2e.yml lint.yml pin-dependencies-check.yml preview-release.yml pull-request-title-check.yml release.yml sync-prs-to-linear.yml sync-skills.yml tests.yml typecheck.yml .gitignore .vscode/ settings.json apps/ demo/ .gitignore emails/ 01-Barebone/ activation.tsx feature-announcement.tsx password-reset.tsx product-update.tsx subscription-confirmation.tsx subscription-update.tsx text-only.tsx theme-fonts.tsx theme.ts welcome.tsx 02-Matte/ activation.tsx collage-fonts.tsx feature-announcement.tsx password-reset.tsx product-update.tsx subscription-confirmation.tsx subscription-update.tsx text-only.tsx theme.ts welcome.tsx 03-Protocol/ activation.tsx dither-fonts.tsx feature-announcement.tsx password-reset.tsx product-update.tsx subscription-confirmation.tsx subscription-update.tsx text-only.tsx theme.ts welcome.tsx 04-Arcane/ abandoned-cart.tsx activation.tsx newsletter.tsx order-confirmation.tsx order-shipping.tsx password-reset.tsx promo.tsx skin-fonts.tsx theme.ts welcome.tsx 05-Studio/ abandoned-cart.tsx activation.tsx newsletter.tsx order-confirmation.tsx order-shipping.tsx password-reset.tsx promo.tsx tech-fonts.tsx theme.ts welcome.tsx Community/ magic-links/ aws-verify-email.tsx linear-login-code.tsx notion-magic-link.tsx plaid-verify-identity.tsx raycast-magic-link.tsx slack-confirm.tsx newsletters/ codepen-challengers.tsx google-play-policy-update.tsx stack-overflow-tips.tsx notifications/ github-access-token.tsx papermark-year-in-review.tsx vercel-invite-user.tsx yelp-recent-login.tsx receipts/ apple-receipt.tsx nike-receipt.tsx reset-password/ dropbox-reset-password.tsx twitch-reset-password.tsx reviews/ airbnb-review.tsx amazon-review.tsx welcome/ koala-welcome.tsx netlify-welcome.tsx stripe-welcome.tsx static/ airbnb-logo.png airbnb-review-user.jpg amazon-book.jpg amazon-facebook.jpg amazon-instagram.jpg amazon-logo.png amazon-prime-logo.png amazon-rating.gif amazon-twitter.jpg apple-card-icon.png apple-hbo-max-icon.jpeg apple-logo.png apple-wallet.png aws-logo.png barebones/ barebones-image-2.png barebones-image-3.png barebones-image.png codepen-challengers.png codepen-cube.png codepen-pro.png collage/ collage-button-bg.png collage-image-1.png collage-image-2.png collage-image-3.png collage-image-4.png collage-image-5.png collage-image-6.png collage-image-7.png collage-image-8.png collage-image-9.png dither/ dither-image-1.png dither-image-2.png dither-image-3.png dither-image-4.png dither-image-5.png dither-image-6.png dither-image-7.png dropbox-logo.png github.png google-play-academy.png google-play-chat.png google-play-footer.png google-play-header.png google-play-icon.png google-play-logo.png google-play-pl.png google-play.png koala-logo.png linear-logo.png netlify-logo.png nike-logo.png nike-phone.png nike-product.png nike-recomendation-1.png nike-recomendation-2.png nike-recomendation-3.png nike-recomendation-4.png notion-logo.png plaid-logo.png raycast-bg.png raycast-logo.png shared/ brand-dark-feature-1.png brand-dark-welcome-1.jpg graphite-saas-image.jpg key-linework.png logo-black.png logo-white.png logo-wordmark-black.png logo.png minimal-earth-hero.jpg social-gh-black.png social-gh-white.png social-in-black.png social-li-white.png social-x-black.png social-x-white.png social-yt-black.png social-yt-white.png timeless-image.png skin/ skin-image-1.png skin-image-10.png skin-image-2.png skin-image-3.png skin-image-4.png skin-image-5.png skin-image-6.png skin-image-7.png skin-image-9.png skins-image-8.png social-gh.png social-li.png social-x.png social-yt.png slack-facebook.png slack-linkedin.png slack-logo.png slack-twitter.png stack-overflow-header.png stack-overflow-logo-sm.png stack-overflow-logo.png stripe-logo.png tech/ logo-wordmark.png tech-image-2.png tech-image-3.png tech-image-4.png tech-image-5.png tech-image-6.png tech-image.png twitch-icon-facebook.png twitch-icon-twitter.png twitch-logo.png vercel-arrow.png vercel-logo.png vercel-team.png vercel-user.png yelp-footer.png yelp-header.png yelp-logo.png tailwind.config.ts license.md package.json tsconfig.json docs/ changelog.mdx cli.mdx components/ body.mdx button.mdx code-block.mdx code-inline.mdx column.mdx container.mdx font.mdx head.mdx heading.mdx hr.mdx html.mdx image.mdx link.mdx markdown.mdx preview.mdx row.mdx section.mdx tailwind.mdx text.mdx contributing/ contributing.mdx codebase-overview.mdx development-workflow/ 1-setup.mdx 2-running-tests.mdx 3-linting.mdx 4-building.mdx 5-writing-docs.mdx 6-editing-the-components.mdx introduction.mdx opening-issues.mdx opening-pull-requests.mdx deployment.mdx docs.json editor/ advanced/ custom-extensions.mdx event-bus.mdx extensions.mdx api-reference/ compose-react-email.mdx email-editor.mdx email-mark.mdx email-node.mdx extensions-list.mdx image-upload-api.mdx theming-api.mdx ui/ bubble-menu.mdx editor-focus-scope.mdx inspector.mdx slash-command.mdx use-editor.mdx features/ bubble-menu.mdx buttons.mdx column-layouts.mdx email-export.mdx image-upload.mdx inspector.mdx link-editing.mdx slash-commands.mdx styling.mdx theming.mdx getting-started.mdx overview.mdx favicon.png getting-started/ automatic-setup.mdx manual-setup.mdx migrating-to-react-email.mdx monorepo-setup/ bun.mdx choose-package-manager.mdx npm.mdx pnpm.mdx yarn.mdx updating-react-email.mdx guides/ internationalization/ next-intl.mdx react-i18next.mdx react-intl.mdx images/ automatic-setup-dev.png background.png bg.png manual-setup-dev.png preview-server-vercel-settings.png integrations/ aws-ses.mdx azure-communication-email.mdx inbound.mdx mailersend.mdx mailgun.mdx nodemailer.mdx overview.mdx plunk.mdx postmark.mdx resend.mdx scaleway.mdx sendgrid.mdx introduction.mdx license.md logo/ dark.svg light.svg package.json roadmap.mdx snippets/ editor-install.mdx editor-next-steps.mdx integrations.mdx localdev.mdx next-steps.mdx support.mdx style.css utilities/ render.mdx web/ .gitignore .vscode/ settings.json components/ _components/ layout.tsx article-with-image/ article-with-image-as-background/ inline-styles.tsx tailwind.tsx article-with-image-on-right/ inline-styles.tsx tailwind.tsx inline-styles.tsx tailwind.tsx article-with-multiple-authors/ inline-styles.tsx tailwind.tsx article-with-single-author/ inline-styles.tsx tailwind.tsx article-with-two-cards/ inline-styles.tsx tailwind.tsx avatars-circular/ inline-styles.tsx tailwind.tsx avatars-group-stacked/ inline-styles.tsx tailwind.tsx avatars-rounded/ ... 1600 more