Email Primitives

Themed React Email component wrappers. Wraps @react-email/components with resolved shadcn theme tokens — templates import from this module instead of React Email directly. Includes variant systems for Button (6 variants), auto-injected Tailwind config (pass theme prop to Body/Tailwind/Hr), and DEFAULT_EMAIL_THEME constant.

core/email-primitives

Installation

1 · Add registry to components.json

2 · Install component

Examples

Full email preview

A complete welcome email built with themed primitives, rendered via @react-email/render.

Button variants

All six Button variants: default, secondary, outline, ghost, destructive, link.

Typography

Heading levels (h1-h3) and Text variants: lead, default, muted, small.

API Reference

Prop	Type	Default	Description
`Html`	`component`	—	Wraps React Email Html with lang/dir defaults.
`Head`	`component`	—	Injects color-scheme meta for dark-mode hinting.
`Body`	`component`	—	Themed background, foreground, and font-family.
`Tailwind`	`component`	—	Auto-injects theme-derived Tailwind config.
`Container`	`component`	—	Max-width 600px with horizontal centering.
`Text`	`component`	—	Themed paragraph. Base: text-foreground text-base leading-6 font-sans. Override with className — e.g. className="text-muted-foreground text-sm" for subdued copy.
`Heading`	`component`	—	Themed headings (h1-h6) with hierarchy defaults.
`Button`	`component`	—	Themed CTA. variant: "default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link".
`Link`	`component`	—	Primary-colored link with underline.
`Hr`	`component`	—	Horizontal rule with theme border color.
`Section, Row, Column`	`components`	—	Structural passthrough wrappers.
`Img, Preview, Font`	`components`	—	Thin passthrough wrappers.
`Markdown, CodeBlock, CodeInline`	`components`	—	Passthrough for rich content.
`DEFAULT_EMAIL_THEME`	`constant`	—	Pre-resolved default theme tokens. Pass to Body, Tailwind, Hr, and EmailMetaList as the theme prop.