{
"$schema": "https://create-turbo-stack.dev/schema/package-registry.json",
"name": "email-templates",
"type": "registry:package",
"description": "React Email transactional templates for auth, account, and billing flows.",
"dependencies": [
"@react-email/components",
"react"
],
"devDependencies": [
"react-email"
],
"registryDependencies": [],
"envVars": {},
"exports": [
"."
],
"lib": [
"ES2022",
"DOM"
],
"environment": "node",
"build": "none",
"categories": [
"email"
],
"docs": "React Email transactional templates (auth, account/KVKK, billing) with shared Tailwind design tokens, transport-agnostic render(), and PreviewProps on every template — brand config in one file, domain-specific templates not included.",
"files": [
{
"path": "src/tailwind.config.ts",
"type": "registry:source",
"content": "import { pixelBasedPreset, type TailwindConfig } from \"react-email\";\n\n// Central brand configuration. Update colors here — templates pick them up automatically.\nconst tailwindConfig = {\n presets: [pixelBasedPreset],\n theme: {\n extend: {\n colors: {\n brand: {\n // Primary CTA color (buttons, key accents)\n primary: \"#18181b\",\n // Foreground on primary (button text)\n primaryFg: \"#ffffff\",\n // Muted links, secondary labels\n muted: \"#71717a\",\n // Body text\n body: \"#3f3f46\",\n // Heading text\n heading: \"#09090b\",\n // Dividers and borders\n border: \"#e4e4e7\",\n // Email body background\n bg: \"#f4f4f5\",\n // Card / container background\n surface: \"#ffffff\",\n // Warning box background (security notices, expiry)\n warnBg: \"#fffbeb\",\n // Warning box text\n warnText: \"#92400e\",\n // Info box background (login details, metadata)\n infoBg: \"#eff6ff\",\n // Info box text\n infoText: \"#1e40af\",\n },\n },\n },\n },\n} satisfies TailwindConfig;\n\nexport default tailwindConfig;\n\n// Brand assets — update src to your production CDN URL.\nexport const brand = {\n name: \"Your Company\",\n // Logo: 160×40px PNG hosted on a CDN. Leave empty to show text name instead.\n logoSrc: \"\",\n logoAlt: \"Your Company\",\n logoWidth: 120,\n logoHeight: 32,\n // CAN-SPAM / KVKK required: physical mailing address.\n address: \"Your Company · 123 Main Street · City, Country\",\n // Base URL for generating links in PreviewProps\n baseUrl: \"https://yourcompany.com\",\n};\n"
},
{
"path": "src/emails/components/layout.tsx",
"type": "registry:source",
"content": "import * as React from \"react\";\nimport {\n Body,\n Container,\n Head,\n Hr,\n Html,\n Img,\n Link,\n Preview,\n Section,\n Tailwind,\n Text,\n} from \"react-email\";\nimport tailwindConfig, { brand } from \"../tailwind.config\";\n\nexport interface EmailLayoutProps {\n preview: string;\n children: React.ReactNode;\n companyName?: string;\n /** Absolute URL to your logo PNG. Falls back to text name. */\n logoSrc?: string;\n logoAlt?: string;\n /** Physical address for CAN-SPAM / KVKK footer. */\n companyAddress?: string;\n unsubscribeUrl?: string;\n}\n\nexport function EmailLayout({\n preview,\n children,\n companyName = brand.name,\n logoSrc = brand.logoSrc,\n logoAlt = brand.logoAlt,\n companyAddress = brand.address,\n unsubscribeUrl,\n}: EmailLayoutProps) {\n const year = new Date().getFullYear();\n\n return (\n \n