Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sutharjay1/reactui-email/llms.txt

Use this file to discover all available pages before exploring further.

The Header component provides multiple layouts for email headers, including logo placement, date displays, and navigation links. All variants use email-safe table layouts for maximum compatibility.

​
Variants

ReactUI Email includes three header variants:
  1. Header one - Logo left, date right
  2. Header two - Centered logo with navigation links
  3. Spline header - Centered logo with horizontal rule divider

​
Header one

A horizontal header with logo on the left and date on the right. 
import { Column, Img, Row, Text } from "@react-email/components";

<Section className="my-0">
  <table className="w-full" cellPadding="0" cellSpacing="0" role="presentation">
    <tr>
      <td>
        <Row>
          <Column align="left">
            <Img
              src="https://cdn.brandfetch.io/idZ_aiFAYa/w/128/h/128/theme/dark/logo.png"
              width="40"
              height="40"
              alt="Framer"
            />
          </Column>
          <Column align="right">
            <Text className="m-0 text-sm font-semibold text-primary">
              {new Date().toLocaleDateString()}
            </Text>
          </Column>
        </Row>
      </td>
    </tr>
  </table>
</Section>

​
Props

​
src
string
required
URL to the logo image
​
width
string | number
Logo width in pixels
​
height
string | number
Logo height in pixels
​
alt
string
required
Alternative text for the logo image

​
Header two

A centered logo with navigation links below a horizontal rule.
Header with navigation
import { Column, Hr, Img, Link, Row, Section, Text } from "@react-email/components";

<Section className="mt-2 flex w-full flex-col items-center justify-center">
  <Img
    src="https://cdn.brandfetch.io/idZ_aiFAYa/w/128/h/128/theme/dark/logo.png"
    width="50"
    height="50"
    alt="Framer"
    className="mx-0 my-0"
  />
</Section>
<Hr className="my-4 border-primary" />
<Section className="my-2">
  <table className="w-full" cellPadding="0" cellSpacing="0" role="presentation">
    <tr>
      <td>
        <Row>
          <Column align="left" style={{ width: "25%" }}>
            <Link href="https://reactui.email" target="_blank" rel="noopener noreferrer">
              <Text className="m-0 text-center text-sm font-semibold text-primary">
                Docs
              </Text>
            </Link>
          </Column>
          <Column align="center" style={{ width: "25%" }}>
            <Link href="https://reactui.email" target="_blank" rel="noopener noreferrer">
              <Text className="m-0 text-center text-sm font-semibold text-primary">
                Blog
              </Text>
            </Link>
          </Column>
          <Column align="right" style={{ width: "25%" }}>
            <Link href="https://reactui.email" target="_blank" rel="noopener noreferrer">
              <Text className="m-0 text-center text-sm font-semibold text-primary">
                Help
              </Text>
            </Link>
          </Column>
        </Row>
      </td>
    </tr>
  </table>
</Section>
This variant uses the Hr component to create a visual separator between the logo and navigation.
The navigation uses a three-column layout with equal width distribution:
  • Each Column has width: "25%" for consistent spacing
  • align prop controls text alignment within each column
  • Links use target="_blank" and rel="noopener noreferrer" for security

​
Spline header

A minimal centered logo with horizontal rule divider.
Spline header
import { Hr, Img, Section } from "@react-email/components";

<Section className="mt-2 flex w-full flex-col items-center justify-center">
  <Img
    src="https://cdn.brandfetch.io/idZ_aiFAYa/w/128/h/128/theme/dark/logo.png"
    width="50"
    height="50"
    alt="Framer"
    className="mx-0 my-0"
  />
</Section>
<Hr className="my-4 border-primary" />
This is the simplest header variant, perfect for:
  • Minimalist email designs
  • Transactional emails where navigation isn’t needed
  • Focus on email content rather than branding

​
Customization

​
Logo sizing

Adjust logo dimensions to match your brand:
Logo sizes
// Small
<Img width="32" height="32" />

// Medium (default)
<Img width="40" height="40" />

// Large
<Img width="60" height="60" />
Customize the number and content of navigation links:
Custom navigation
<Row>
  <Column align="left" style={{ width: "20%" }}>
    <Link href="/products">
      <Text className="m-0 text-center text-sm font-semibold text-primary">
        Products
      </Text>
    </Link>
  </Column>
  <Column align="center" style={{ width: "20%" }}>
    <Link href="/pricing">
      <Text className="m-0 text-center text-sm font-semibold text-primary">
        Pricing
      </Text>
    </Link>
  </Column>
  <Column align="center" style={{ width: "20%" }}>
    <Link href="/docs">
      <Text className="m-0 text-center text-sm font-semibold text-primary">
        Docs
      </Text>
    </Link>
  </Column>
  <Column align="right" style={{ width: "20%" }}>
    <Link href="/support">
      <Text className="m-0 text-center text-sm font-semibold text-primary">
        Support
      </Text>
    </Link>
  </Column>
</Row>
Adjust the width percentage based on the number of navigation items to maintain equal spacing.

​
Date formatting

Customize the date display format:
Date formats
// Default locale format
{new Date().toLocaleDateString()}

// Specific locale
{new Date().toLocaleDateString('en-US', { 
  month: 'long', 
  day: 'numeric', 
  year: 'numeric' 
})}

// Custom format
{new Date().toLocaleDateString('en-US', { 
  weekday: 'long',
  year: 'numeric',
  month: 'short',
  day: 'numeric'
})}

​
Horizontal rule styling

Customize the divider appearance:
Hr variants
// Primary color
<Hr className="my-4 border-primary" />

// Gray
<Hr className="mb-6 mt-8 border-gray-200" />

// Thicker line
<Hr className="my-4 border-2 border-primary" />

​
Best practices

  1. Optimize images - Use appropriately sized images and consider 2x versions for retina displays
  2. Provide alt text - Always include descriptive alt text for accessibility
  3. Keep navigation simple - Limit navigation links to 3-5 items for better mobile experience
  4. Use consistent branding - Ensure logo and colors match your brand guidelines
  5. Test across clients - Header layouts can vary across email clients; always test

​
Accessibility

Ensure your headers are accessible:
Accessible header
<table 
  className="w-full" 
  cellPadding="0" 
  cellSpacing="0" 
  role="presentation"  // Indicates decorative table
>
  <tr>
    <td>
      <Img
        src="/logo.png"
        width="40"
        height="40"
        alt="Company name logo"  // Descriptive alt text
      />
    </td>
  </tr>
</table>
  • Use role="presentation" on layout tables
  • Provide meaningful alt text for images
  • Ensure sufficient color contrast for text

​
Source code

View the complete source code for all header variants:

Build docs developers (and LLMs) love

Get started for freeTalk to us