Text | Notion

Text blocks in your email

Install

import { Text, Link } from "@react-email/components";

H1

Untitled

<Heading 
	className="text-[31px] font-semibold text-gray-950">
	Welcome to MidnightUI
</Heading>

Paragraph

Untitled

<Text 
	className="text-[16px] text-gray-600">
	We're thrilled to have you join us on this exciting journey. Get ready to dive into a world where your creativity knows no bounds, and stunning visual products come to life.
</Text>

Footer with links

Untitled

<Text className="text-[13px] text-gray-400 text-center">
  <Link className="text-blue-600 underline underline-offset-2" href="#">
    MidnightUI
  </Link> 
  is committed to helping you build your email design system. If you'd prefer to not receive these emails, please 
  <Link className="text-blue-600 underline underline-offset-2" href="#">
    unsubscribe
  </Link> 
  or 
  <Link className="text-blue-600 underline underline-offset-2" href="#">
    manage your email preferences
  </Link>.
</Text>
<Text className="text-[13px] text-gray-400 text-center">
  MidnightUI 420 George Street, Sydney, NSW 2000 Australia
</Text>