@fulers/react-email

Production-ready React Email package with EmailProvider, theme support, and all React Email components bundled.

Features

• 🎨 Theme Support: Light and dark themes from Laravel config
• 🌍 RTL/LTR Support: Automatic text direction based on locale
• 🎯 Type-Safe: Full TypeScript support
• 💨 Tailwind CSS: Built-in Tailwind support
• 📦 All-in-One: Includes all React Email components
• 🚀 Production Ready: EmailProvider handles all configuration

Installation

npm install @fulers/react-email

That's it! No need to install @react-email/components, @react-email/tailwind, or react separately.

Usage

Basic Email Template

import * as React from "react";
import {
  EmailProvider,
  Button,
  Heading,
  Text,
  Section,
} from "@fulers/react-email";
import type { BaseEmailProps } from "@fulers/react-email";

interface WelcomeEmailProps extends BaseEmailProps {
  userName: string;
}

export const WelcomeEmail = (props: WelcomeEmailProps) => {
  return (
    <EmailProvider {...props} preview="Welcome!">
      <Section className="mb-8 text-center">
        <Heading className="text-2xl font-bold text-text">
          Welcome, {props.userName}!
        </Heading>
      </Section>

      <Section className="mb-6">
        <Text className="text-base text-text">
          We're excited to have you on board.
        </Text>
      </Section>

      <Section className="text-center">
        <Button
          href={props.appUrl}
          className="rounded-md bg-primary px-6 py-3 text-white"
        >
          Get Started
        </Button>
      </Section>
    </EmailProvider>
  );
};

PHP Email Class

<?php

namespace Modules\Users\Notifications\Mail;

use Fulers\Foundation\Abstracts\Email;
use Illuminate\Contracts\Queue\ShouldQueue;

class WelcomeEmail extends Email implements ShouldQueue
{
    public function __construct(
        public User $user
    ) {
        parent::__construct();
    }

    protected function buildViewData(): array
    {
        return array_merge(parent::buildViewData(), [
            'userName' => $this->user->name,
        ]);
    }

    public function build(): self
    {
        return $this
            ->view('users::emails.welcome-email')
            ->subject('Welcome!');
    }
}

EmailProvider

The EmailProvider component wraps your email content and handles:

• HTML structure with locale and direction
• Tailwind configuration from Laravel theme
• Responsive container
• Preview text

<EmailProvider
  {...props} // Spread all BaseEmailProps
  preview="Preview text" // Optional preview text
>
  {/* Your email content */}
</EmailProvider>

Available Components

All React Email components are re-exported:

• EmailProvider - Our custom provider (wraps everything)
• Button - Email-safe buttons
• Container - Centered container
• Heading - Headings (h1-h6)
• Text - Paragraphs
• Hr - Horizontal rules
• Link - Links
• Section - Layout sections
• Img - Images
• Row / Column - Grid layout
• CodeBlock / CodeInline - Code formatting
• Markdown - Markdown support
• Font - Custom fonts
• And more...

See React Email docs for component details.

Tailwind Classes

All classes use theme colors from Laravel config/theme.php:

Colors

• bg-primary, text-primary - Primary brand color
• bg-secondary, text-secondary - Secondary color
• bg-background - Page background
• bg-surface - Card/container background
• text-text - Primary text color
• text-text-secondary - Secondary text color
• border-border - Border color
• bg-success, bg-warning, bg-error, bg-info - Semantic colors

Spacing

• p-xs, m-xs through p-3xl, m-3xl

Border Radius

• rounded-sm through rounded-full

Fonts

• font-body, font-heading, font-mono

TypeScript

import type { BaseEmailProps, EmailTheme } from "@fulers/react-email";

interface MyEmailProps extends BaseEmailProps {
  customField: string;
}

Theme Configuration

Theme comes from Laravel's config/theme.php:

// config/theme.php
return [
    'themes' => [
        'light' => [
            'colors' => [
                'primary' => '#5469d4',
                // ...
            ],
        ],
    ],
];

The themeConfig is automatically passed to all emails via the Email abstract class.

RTL Support

Automatic RTL for Arabic, Hebrew, Persian, and Urdu:

// Automatically handled by EmailProvider
<EmailProvider {...props}>
  {/* Content flows RTL for ar, he, fa, ur locales */}
</EmailProvider>

Development

# Install dependencies
npm install

# Build package
npm run build

# Watch mode
npm run dev

License

MIT