@mailviews/react-email
v0.2.0
Published
Base components, Tailwind setup and layout for Mailviews React Email components
Maintainers
cossssminReadme
@mailviews/react-email
Base components, Tailwind setup and layout for the Mailviews React Email component library.
Every Mailviews component you download in React Email flavor imports from this package. It gives you the same building blocks, design tokens and Outlook helpers the components are built with, so they render identically to the Maizzle originals.
Install
npm install @mailviews/react-emailPeer dependencies: react (18 or 19) and react-email (6.2+).
Usage
Wrap your email in MainLayout. It sets up <Html>, <Head>, <Body> and react-email's <Tailwind> with the Mailviews theme and plugin, links the Inter web font and adds the Outlook head fixes.
import { MainLayout, Heading, Text, Button, Spacer } from '@mailviews/react-email'
export default function Welcome() {
return (
<MainLayout title="Welcome to Acme">
<table className="w-[600px] max-w-full bg-white" cellPadding="0" cellSpacing="0" role="none">
<tr>
<td className="p-6">
<Heading level={1} className="m-0 text-2xl/8 font-semibold text-gray-950">
Welcome aboard
</Heading>
<Spacer className="h-4" />
<Text className="m-0 text-base/6 text-gray-700">Thanks for signing up.</Text>
<Spacer className="h-6" />
<Button className="bg-indigo-600 hover:bg-indigo-700" href="https://example.com">
Get started
</Button>
</td>
</tr>
</table>
</MainLayout>
)
}Then render or preview it as you would any React Email template (email dev, render() from react-email, etc.).
Using the Tailwind setup without MainLayout
If you have your own document wrapper, pass the config and theme to <Tailwind> yourself:
import { Tailwind } from 'react-email'
import { mailviewsConfig, mailviewsTheme } from '@mailviews/react-email'
<Tailwind config={mailviewsConfig} theme={mailviewsTheme}>
...
</Tailwind>mailviewsTheme carries the design tokens from @maizzle/tailwindcss (px-based spacing and font sizes, hex palette, custom radii). mailviewsConfig registers everything that cannot live in a CSS @theme block: desktop-first breakpoints (sm: is max-width: 600px), email client variants (gmail:, apple-mail:, outlook-mac:, ogsc:, …) and mso-* utilities.
Components
| Component | What it does |
| --- | --- |
| Button | Bulletproof <a> button with optional icon and Outlook padding fallback (msoPt, msoPb, msoPx). |
| Heading | <h1>–<h6> picked by level. |
| Text | <p> by default, <span> via as. |
| Spacer | Vertical (className="h-6") or horizontal (type="horizontal" width={24}) gap that Outlook respects. |
| Divider | Horizontal rule with type, height, color, width, spaceX, spaceY, align. |
| Pill | Inline badge with optional Outlook-only line break before it. |
| StarRating | Row of star images for a rating, with optional reviewsText. |
| TimelineCheck | Check-mark bullet used by timeline components. |
| InlineGap | Invisible inline spacer for gaps between inline elements. |
| VFill | VML background image container for Outlook, with image, width, height, color, position, … |
| Outlook | Wraps children (or raw HTML) in an <!--[if mso]> conditional. Target versions with only, not, lt, lte, gt, gte. |
| NotOutlook | Wraps children in <!--[if !mso]><!--> so Outlook on Windows skips them. |
| Section | Maizzle <Section>: a <div> plus an Outlook ghost table whose cell repeats the div's padding and background colour. Props width, msoStyle, outlookFallback. |
| Container | Maizzle <Container>: centered max-w-150 (600px) <div> plus a fixed-width, centered Outlook ghost table. Same props as Section. |
| Img | Maizzle <Img>: max-w-full align-middle, alt="" by default, src resolved through asset(), optional href wrapper. |
| Link | <a> that defaults to no-underline. |
| Hr | Filled <div> rule (my-6 bg-gray-300 h-px), line-height follows height so Outlook sizes it. |
| Vml | Outlook-only VML shape (rect, roundrect, oval, line) around the children; style the children with CSS for every other client. |
| OutlookBg | VML background image for Outlook; pair it with a CSS background on the parent. |
React cannot emit bare HTML comments, so Outlook, NotOutlook and VFill render their markers on a wrapper element chosen with as (div, span, td, tr or p). Use raw on Outlook for VML or ghost-table markup that must not go through Tailwind:
<Outlook as="span" raw={`<i hidden style="mso-font-width: 40%"> ​</i>`} />Template kits
Mailviews template kits (Atrium, …) ship a react/ project built on this package. Their emails use the Maizzle layout components above (Section, Container, Img, Link, Hr, Vml, OutlookBg) with the same Tailwind classes as the Vue sources, so both flavors render the same HTML. Where a Maizzle component has no Outlook-specific markup, the kits use react-email's own components instead: Html, Head, Body, Preview, Row and Column.
Brand tokens are added with extendTheme(), which returns the CSS to pass to <Tailwind theme> and registers the colours so Section and Container can paint their Outlook cells:
import { Tailwind } from 'react-email'
import { extendTheme, mailviewsConfig } from '@mailviews/react-email'
const theme = extendTheme(`@theme { --color-brand-700: #7e1b47; }`)
<Tailwind config={mailviewsConfig} theme={theme}>
...
</Tailwind>Assets
Mailviews components reference images by path and resolve them through asset(). The default base is the Mailviews CDN; point it at your own host once, before rendering:
import { setAssetBase } from '@mailviews/react-email'
setAssetBase('https://cdn.example.com/emails/')Absolute http(s)://, protocol-relative and data: URLs pass through untouched.
Utilities
toStyle(css)converts aprop: value; prop: valuestring to a React style object.getAssetBase()returns the current asset base URL.
License
MIT