Magic Is Now Available
The Magic theme, which is a highly modular email theme built with React Email and TailwindCSS, is now available for free.
Meet Magic 1.0
Magic is a free, highly modular email theme built with React Email and TailwindCSS. Every block is a typed React component that owns its own structure and styling.
You can drop in a hero and a CTA for a quick announcement, or stack the full system for a long-form newsletter. The pieces don't care what order they're in. Because it's built on React Email and Tailwind, writing emails feels like writing your product — component composition, utility classes, no wrestling with HTML tables or inline styles. And the output renders reliably across Gmail, Outlook, Apple Mail, and dark-mode inboxes.
These blocks can be used together or individually to create a variety of email layouts.
Why We Built Magic
Most email templates ship as monolithic files: a single, rigid layout you're expected to reverse-engineer and reshape every time you need something slightly different. Swap a section, reorder a block, remove a feature row, and suddenly spacing breaks, styles bleed, or the whole thing collapses in Outlook. The template was never designed to come apart.
We wanted to build the opposite: an email system where every section is its own self-contained block, designed to work independently and snap together in any order. Instead of starting from a fixed layout and subtracting what you don't need, you start from nothing and compose exactly what you do.
Blocks
In this first release, we've built a few key blocks that we think are essential for any email campaign. These can be combined in any order to create a variety of email layouts.
The blocks are:
- Hero
- Text
- Cards
- CTA
- Footer
Hero
A visual opener with headline, description, and
an optional image to set the tone of your email.
Text
A clean, readable content block for body
copy, perfect for any longer-form writing.
Cards
A grid layout for showcasing features,
products and more using images and short descriptions.
Call to action
A CTA section with the focus of driving
the reader toward one clear next step.
Footer
A footer section with links, social icons,
and legal copy like unsubscribe and company details.
