Email Composites

Higher-level email helpers that eliminate boilerplate repeated in every template. Four focused components: EmailLogo, EmailEyebrow, EmailFooter, EmailMetaList. Not a second design system — just pragmatic code reduction for the patterns that appear in every transactional email.

core/email-composites

Installation

1 · Add registry to components.json

2 · Install component

Examples

All composites in context

A realistic receipt-style email using EmailLogo, EmailEyebrow (primary + secondary), EmailMetaList, and EmailFooter.

API Reference

Prop	Type	Default	Description
`EmailLogo`	`component`	—	Centred logo section. Renders nothing if src is falsy. Props: src?, alt?, width?, height?, className?, imgClassName?.
`EmailEyebrow`	`component`	—	Small uppercase label above a Heading. Default colour: text-primary. Override with className (e.g. className="text-secondary").
`EmailFooter`	`component`	—	Copyright row with optional support email (mailto link), unsubscribe URL, and footer copy. Computes year automatically.
`EmailMetaList`	`component`	—	Key-value metadata table in a bg-muted box. Items pair into 2-column rows; odd trailing items span the full row. Ideal for order IDs, dates, booking details.
`EmailMetaItem`	`interface`	—	{ label: string; value: React.ReactNode }