Typography components provide email-safe text rendering with sensible defaults and full Tailwind CSS support.
Heading
Flexible heading component that can render h1 through h6 elements with margin utilities.
Props
as
'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
default:"h2"
The heading level to render
Tailwind CSS classes or custom CSS classes
Margin Utilities
The Heading component supports shorthand margin props:
Margin on all sides (e.g., “16px”)
Horizontal margin (left and right)
Vertical margin (top and bottom)
HTMLAttributes<HTMLHeadingElement>.
Usage
<Heading as="h1" class="text-2xl font-bold">
Welcome to Our Newsletter
</Heading>
Basic Headings
With Margin Props
Styled Headings
Real Example
<Heading as="h1" class="text-3xl font-bold">
Main Title
</Heading>
<Heading as="h2" class="text-2xl font-semibold">
Section Title
</Heading>
<Heading as="h3" class="text-xl">
Subsection Title
</Heading>
<Heading
as="h1"
my="32px"
class="text-2xl font-bold"
>
Title with Vertical Margin
</Heading>
<Heading
as="h2"
mt="24px"
mb="16px"
class="text-xl"
>
Custom Top and Bottom Margins
</Heading>
<Heading
as="h3"
m="20px"
class="text-lg"
>
Margin on All Sides
</Heading>
<Heading
as="h1"
class="mb-4 text-center text-3xl font-bold text-blue-600"
>
Welcome Back!
</Heading>
<Heading
as="h2"
class="border-b border-gray-200 pb-2 text-xl font-semibold text-gray-800"
>
Order Summary
</Heading>
<Heading
as="h3"
class="text-lg font-medium uppercase tracking-wide text-gray-600"
>
Product Details
</Heading>
<Container>
<Section>
<Heading
as="h1"
my="30px"
class="text-center text-2xl font-normal text-black"
>
Join <strong>Acme Corp</strong> on <strong>Vercel</strong>
</Heading>
</Section>
<Section>
<Heading
as="h2"
mb="16px"
class="text-xl font-semibold text-gray-900"
>
What's Included
</Heading>
<Text>Your subscription includes...</Text>
</Section>
</Container>
Text
Paragraph text component with email-safe default styling.
Props
HTML element to render (p, span, div, etc.)
Inline CSS styles (merged with defaults)
Tailwind CSS classes or custom CSS classes
HTMLAttributes<HTMLParagraphElement>.
Default Styles
font-size: 14px - Email-safe base sizeline-height: 24px - Comfortable readingmargin: 16px 0 - Vertical spacing
Usage
<Text class="text-gray-700">
This is a paragraph of text in your email.
</Text>
Basic Text
Custom Element
Styled Text
Real Examples
<Text>
This is a standard paragraph with default styling.
</Text>
<Text class="text-gray-600">
This paragraph has custom text color.
</Text>
<Text as="span" class="font-bold">
Inline bold text
</Text>
<Text as="div" class="rounded bg-blue-50 p-4">
Text in a div wrapper with background
</Text>
<Text class="text-sm text-gray-500">
Small gray text for secondary information
</Text>
<Text class="text-lg font-semibold text-gray-900">
Larger, bolder text for emphasis
</Text>
<Text class="text-center italic text-gray-600">
Centered italic text
</Text>
<Container>
<!-- Greeting -->
<Text class="text-base text-black">
Hello {username},
</Text>
<!-- Main content -->
<Text class="text-sm leading-6 text-black">
<strong>{invitedByUsername}</strong> has invited you to join the
<strong>{teamName}</strong> team.
</Text>
<!-- Footer text -->
<Text class="text-xs leading-6 text-gray-600">
This invitation was intended for <span class="text-black">{username}</span>.
If you were not expecting this invitation, you can ignore this email.
</Text>
<!-- No margin text -->
<Text style="margin: 0; padding: 0; line-height: 1.4; font-size: 10px;" class="text-gray-600">
ORDER ID
</Text>
</Container>
Typography Combinations
Here are common patterns combining Heading and Text:
Article Layout
Transactional Email
Marketing Email
<Section class="mb-8">
<Heading as="h1" mb="16px" class="text-3xl font-bold text-gray-900">
Your Weekly Newsletter
</Heading>
<Heading as="h2" mb="12px" class="text-xl font-semibold text-gray-800">
Feature Article
</Heading>
<Text class="mb-4 text-gray-700">
This week we're excited to share some amazing updates with you.
Our team has been working hard to bring you new features.
</Text>
<Text class="text-gray-700">
Read on to learn about what's new and how you can take advantage
of these improvements.
</Text>
</Section>
<Container>
<Section>
<Heading as="h1" my="24px" class="text-2xl font-bold text-center">
Order Confirmation
</Heading>
</Section>
<Section class="mb-6">
<Text class="text-gray-800">
Thank you for your order! We've received your payment and are
preparing your items for shipment.
</Text>
</Section>
<Section>
<Heading as="h2" mb="12px" class="text-lg font-semibold">
Order Details
</Heading>
<Text style="margin: 0;" class="text-sm text-gray-600">
Order ID: #12345
</Text>
<Text style="margin: 0;" class="text-sm text-gray-600">
Date: January 18, 2024
</Text>
</Section>
</Container>
<Container class="text-center">
<Section class="mb-6">
<Heading
as="h1"
class="text-4xl font-bold text-blue-600"
my="32px"
>
Flash Sale!
</Heading>
<Text class="text-xl font-semibold text-gray-900">
50% Off Everything
</Text>
</Section>
<Section class="mb-8">
<Text class="text-lg text-gray-700">
For the next 24 hours only, enjoy massive discounts across
our entire store.
</Text>
</Section>
<Section>
<Button
href="https://example.com/sale"
class="rounded bg-blue-600 px-8 py-4 text-white"
>
Shop Now
</Button>
<Text class="mt-4 text-xs text-gray-500">
Offer expires at midnight tonight
</Text>
</Section>
</Container>
Best Practices
Use semantic heading levels (h1, h2, h3) to create proper document structure, even though visual styling can be customized with Tailwind classes.
The Text component’s default styles are optimized for email readability. Override with caution and always test in multiple email clients.
Avoid using very small font sizes (below 12px) as they may be difficult to read on mobile devices.
Use the margin utility props (m, mx, my, mt, mr, mb, ml) on Heading for precise spacing control that works consistently across email clients.
When using as="span" on Text components, remember that margin utilities may not work as expected since spans are inline elements.