Skip to main content
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