Email

Email is table-based, inline-styled, and can't use CSS variables — so it ships as its own package that shares Tollerud's tokens (inlined as literals), not the @tollerud/ui components. Each project composes its own templates from the primitives.

npm install @tollerud/email

Pick a template and toggle its options — the preview renders live in an isolated iframe with the real @tollerud/email output, and the code updates to match. Product name and recipient are free-text; Language swaps in the copy override (Norwegian); the header and footer options map to the header / footer props.

import { render, WelcomeEmail } from '@tollerud/email'

const html = await render(
  <WelcomeEmail
    name="Mathias"
    productName="Graphify"
    ctaUrl={dashboardUrl}
    header={{ productName: 'Graphify' }}
    footer={{ labels: { tollerudProject: 'A Tollerud Project' }, address: 'Oslo, Norway', unsubscribeUrl }}
  />,
)

Content and branding are fully prop-driven; copy is overridable for i18n (each template exports a *Copy type; dynamic lines are functions); every primitive takes a `style` escape hatch (merged last, overrides the token default). Visual design otherwise stays token-locked to the brand.

// Localize (or reword) via `copy`
<WelcomeEmail
  copy={{
    heading: (n) => `Velkommen${n ? ', ' + n : ''}.`,
    body: (p) => `Din ${p}-konto er klar. Ta en titt rundt.`,
  }}
/>

// One-off visual tweaks via `style` (merged after the token defaults)
<EmailButton href={url} style={{ borderRadius: '999px' }}>Pill</EmailButton>