Skip to main content
ReactUI Email provides a collection of production-ready components that you can use to build beautiful, responsive transactional emails. Each component is built with React Email and styled with Tailwind CSS for maximum flexibility.

​
Available components

Button

Call-to-action buttons with multiple variants and styles

Header

Email headers with logos, navigation, and date displays

Grid

Responsive grid layouts for images and content

Confirm account

Complete account confirmation email template

​
When to use each component

​
Button

Use button components when you need:
  • Primary call-to-action elements
  • Multiple action buttons (primary + secondary)
  • Full-width action buttons for mobile
  • Buttons with icons for enhanced visual communication
  • Bordered buttons for secondary actions
Use header components when you need:
  • Brand identity with logo placement
  • Date or timestamp displays
  • Navigation links in email headers
  • Centered logo with horizontal rule divider

​
Grid

Use grid components when you need:
  • Display multiple images in a structured layout
  • Showcase products or features side-by-side
  • Create visual galleries within emails
  • Responsive multi-column layouts

​
Confirm account

Use confirm account components when you need:
  • Complete email verification flows
  • Account activation messages
  • Welcome emails with confirmation CTAs
  • Professional onboarding emails

​
Component structure

All ReactUI Email components follow a consistent structure:
  1. React Email components - Built on @react-email/components
  2. Tailwind CSS - Configured with custom theme extensions
  3. Email-safe markup - Uses table-based layouts for maximum client compatibility
  4. Customizable props - Easy to adapt to your brand and use case

​
Customization

You can customize any component by:
  • Modifying the Tailwind config theme colors
  • Adjusting spacing and sizing classes
  • Replacing placeholder content and URLs
  • Combining components to create complete email templates
All components use CSS variables and HSL color notation for easy theming. Update the colors object in the Tailwind config to match your brand.

​
Next steps

Explore individual component documentation to learn about specific props, variants, and usage examples:

Build docs developers (and LLMs) love

Get started for freeTalk to us