React email templates

Free React email components: layout, header, footer, buttons and complete welcome and receipt emails, designed to match your product UI.

8 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark

Transactional email is part of the product, so it should look like it. These components share the kit's type and color decisions in a layout that suits email clients.

Use them as the design for your templates with React Email or your email provider, and keep sign up, receipts and alerts consistent with the app.

Components 6

Email ButtonuiSolid link button for email templates with a fixed height, padding and rounded corners. Uses an anchor so it survives email clients that strip buttons.npx shadcn@latest add ui.minidev.pro/r/email-button.json Email CarduiContent card for transactional emails with an optional title and body text, inset from the email edges. Use it for receipts, codes and highlights.npx shadcn@latest add ui.minidev.pro/r/email-card.json Email FooteruiEmail footer with your company address and Unsubscribe and Preferences links, centered on a muted background. Covers what marketing emails need at the end.npx shadcn@latest add ui.minidev.pro/r/email-footer.json Email HeaderuiSimple email header band that shows your brand name on a muted background with a bottom border. Sits at the top of the email layout in React templates.npx shadcn@latest add ui.minidev.pro/r/email-header.json Email LayoutuiEmail layout shell with a centered 560px column, rounded border and surface background. Compose it with the email header, cards, button and footer.npx shadcn@latest add ui.minidev.pro/r/email-layout.json Email Preview FrameuiInbox style preview frame showing the sender and subject above the rendered email body. Handy for template galleries and email settings screens.npx shadcn@latest add ui.minidev.pro/r/email-preview-frame.json

Motion 2

Email ReceiptmotionA payment receipt email in a preview frame with a branded header, plan and tax line items, a bold total and a footer. A React starting point for billing mail.npx shadcn@latest add ui.minidev.pro/r/email-receipt.json Email WelcomemotionA React welcome email template in a preview frame with a branded header, intro copy, a call to action button, a quick start card and a standard footer.npx shadcn@latest add ui.minidev.pro/r/email-welcome.json

See them live

Galleries render these components with sample data in every state.

Frequently asked questions

Do these work with React Email?

They share its approach of composing emails from React components. Check each component against your target clients, since email CSS support varies.

Is there a receipt template?

Yes. The email receipt component shows line items, totals and payment details.

Can I preview emails in the browser?

The email preview frame renders a template inside a client style frame for review.

Related categories

Landing page sections for React and Tailwind React login and signup components React pricing and billing components