{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "email-template-previewer", "title": "Email Template Previewer", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/email-template-previewer/EmailTemplatePreviewer.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowRight,\n Check,\n CheckCircle2,\n Code2,\n Copy,\n FileCode,\n Flame,\n Inbox,\n Layers,\n Lock,\n Mail,\n Monitor,\n Palette,\n Send,\n ShieldCheck,\n Smartphone,\n Terminal,\n Zap,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nexport interface EmailTemplatePreviewerProps {\n className?: string\n}\n\ntype ViewportMode = 'desktop' | 'mobile' | 'raw'\ntype ClientOption = 'all' | 'gmail' | 'apple' | 'outlook'\n\nexport function EmailTemplatePreviewer({ className }: EmailTemplatePreviewerProps) {\n const [viewport, setViewport] = React.useState('desktop')\n const [subject, setSubject] = React.useState('🚀 Introducing UIPKGE 2.0: The unbundled UI registry')\n const [previewText, setPreviewText] = React.useState(\n 'Explore 300+ production components with zero npm dependencies. Native Vue 3 & React code.',\n )\n const senderName = 'UIPKGE Team'\n const senderEmail = 'updates@uipkge.dev'\n const recipientEmail = 'subscriber@example.com'\n\n // Test email dialog state\n const [isTestModalOpen, setIsTestModalOpen] = React.useState(false)\n const [testTargetEmail, setTestTargetEmail] = React.useState('alex.developer@company.com')\n const [selectedClient, setSelectedClient] = React.useState('all')\n const [isSendingTest, setIsSendingTest] = React.useState(false)\n const [testSentSuccess, setTestSentSuccess] = React.useState(false)\n\n // Export copy feedback\n const [isCopied, setIsCopied] = React.useState(false)\n\n const subjectCharCount = subject.length\n const preheaderCharCount = previewText.length\n\n const emojiCount = React.useMemo(() => {\n const matches = subject.match(/\\p{Extended_Pictographic}/gu)\n return matches ? matches.length : 0\n }, [subject])\n\n const subjectStatus = React.useMemo(() => {\n if (subjectCharCount >= 30 && subjectCharCount <= 60) {\n return { label: 'Optimal length', variant: 'success' as const }\n }\n if (subjectCharCount < 30) {\n return { label: 'Short subject', variant: 'info' as const }\n }\n return { label: 'Long subject (may truncate)', variant: 'warning' as const }\n }, [subjectCharCount])\n\n const rawHtmlOutput = React.useMemo(() => {\n return `\n\n\n \n \n \n ${subject.replace(/\"/g, '"')}\n \n \n\n\n \n
\n ${previewText.replace(/\"/g, '"')}\n
\n\n \n \n \n \n
\n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n
\n \n \n \n \n \n
\n ⚡ UIPKGE\n \n Changelog #24\n
\n
\n \n Major Release\n \n

\n Ship polished UIs in minutes\n

\n

\n We completely rebuilt the registry engine. Zero npm dependencies, 100% code ownership, and full native support for Vue 3 and React with modern OKLCH tokens.\n

\n
\n \n \n \n \n \n \n \n
\n Terminal • Quick Install\n
\n npx shadcn-vue add @uipkge/button\n
\n
\n \n \n \n \n
\n \n Explore Components →\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n
\n ⚡ Zero Dependency Footprint:\n Components live directly in your code.\n
\n 🎨 OKLCH Dark Mode Tokens:\n Fluid WCAG AA contrast calibrated for all themes.\n
\n 🧩 Dual-Framework Registry:\n Full TypeScript parity for Vue 3 and React.\n
\n
\n

\n UIPKGE Inc. • 548 Market St, Suite 29314, San Francisco, CA 94104\n

\n

\n Docs •\n GitHub •\n Unsubscribe\n

\n
\n
\n\n`\n }, [subject, previewText])\n\n const copyHtmlToClipboard = async () => {\n try {\n await navigator.clipboard.writeText(rawHtmlOutput)\n setIsCopied(true)\n setTimeout(() => {\n setIsCopied(false)\n }, 2000)\n } catch (err) {\n console.error('Failed to copy HTML: ', err)\n }\n }\n\n const handleSendTest = () => {\n if (!testTargetEmail) return\n setIsSendingTest(true)\n setTestSentSuccess(false)\n\n setTimeout(() => {\n setIsSendingTest(false)\n setTestSentSuccess(true)\n setTimeout(() => {\n setTestSentSuccess(false)\n setIsTestModalOpen(false)\n }, 2000)\n }, 700)\n }\n\n return (\n
\n {/* Top Toolbar Card */}\n \n \n
\n
\n
\n Marketing Email Designer\n \n \n Resend Engine\n \n
\n \n Live viewport rendering, deliverability telemetry, and RFC-compliant HTML generator.\n \n
\n\n {/* Viewport Switcher & Primary Actions */}\n
\n {/* Viewport Switcher */}\n
\n setViewport('desktop')}\n >\n \n Desktop 600px\n \n setViewport('mobile')}\n >\n \n Mobile 375px\n \n setViewport('raw')}\n >\n \n Raw HTML\n \n
\n\n {/* Send Test Dialog Modal */}\n \n \n \n \n \n \n \n \n Dispatch Test Preview\n \n \n Send a live test message to your inbox to inspect rendering across email clients.\n \n \n\n
\n
\n \n setTestTargetEmail(e.target.value)}\n type=\"email\"\n placeholder=\"you@company.com\"\n className=\"text-xs\"\n disabled={isSendingTest}\n />\n
\n\n
\n \n
\n setSelectedClient('all')}\n >\n 🌐 All Clients\n \n setSelectedClient('gmail')}\n >\n ✉️ Gmail (Web)\n \n setSelectedClient('apple')}\n >\n 🍏 Apple Mail (iOS)\n \n setSelectedClient('outlook')}\n >\n 💼 Outlook 365\n \n
\n
\n\n {testSentSuccess && (\n
\n \n Test email dispatched to {testTargetEmail}!\n
\n )}\n
\n\n \n setIsTestModalOpen(false)}\n >\n Cancel\n \n \n \n \n \n\n {/* Export HTML Button */}\n \n
\n
\n \n\n \n\n {/* Subject & Preheader Inputs with Character & Emoji Analyzers */}\n \n
\n {/* Subject Line Section */}\n
\n
\n \n
\n \n {subjectCharCount}/60 chars\n \n \n \n {emojiCount} emoji\n \n
\n
\n setSubject(e.target.value)}\n className=\"text-xs\"\n placeholder=\"Enter campaign subject line...\"\n />\n
\n\n {/* Preheader Section */}\n
\n
\n \n \n {preheaderCharCount}/90 chars\n \n
\n setPreviewText(e.target.value)}\n className=\"text-xs\"\n placeholder=\"Secondary snippet shown in mail list...\"\n />\n
\n
\n \n \n\n {/* 2-Column Preview Workspace */}\n
\n {/* Left Column: Email Canvas Container */}\n
\n
\n {/* RAW HTML VIEW */}\n {viewport === 'raw' ? (\n
\n
\n
\n \n template.compiled.html\n \n 14.2 KB\n \n
\n \n
\n 
\n                  {rawHtmlOutput}\n
\n
\n ) : (\n /* DESKTOP / MOBILE EMAIL PREVIEW CANVAS */\n \n {/* Email Window Envelope Frame */}\n
\n {/* Window Chrome Bar */}\n
\n
\n
\n
\n
\n
\n
\n \n UIPKGE Inbox Preview · {viewport === 'desktop' ? '600px' : '375px'}\n
\n \n \n TLS 1.3\n \n
\n\n {/* Envelope Metadata Readout */}\n
\n
\n
\n
\n U\n
\n
\n
\n {senderName}\n <{senderEmail}>\n
\n
To: {recipientEmail}
\n
\n
\n Aug 21, 2026, 10:00 AM\n
\n\n
\n
{subject}
\n
{previewText}
\n
\n
\n\n {/* Rendered Email Body */}\n
\n {/* Header Logo Banner */}\n
\n
\n
\n \n
\n UIPKGE\n
\n \n Changelog #24\n \n
\n\n {/* Hero Section */}\n
\n \n Major Release\n \n

\n Ship polished UIs in minutes\n

\n

\n We completely rebuilt the registry engine. Zero npm dependencies, 100% code ownership, and full\n native support for Vue 3 and React with modern OKLCH tokens.\n

\n
\n\n {/* Featured Screenshot / Product Mock Card */}\n
\n
\n
\n \n components/ui/button.tsx\n
\n TypeScript\n
\n
\n
\n $ npx shadcn add @uipkge/button\n
\n\n {/* Mini UI Preview inside email */}\n
\n \n \n \n \n
\n
\n
\n\n {/* Primary CTA Button */}\n
\n \n

\n Free & open source · MIT License · 300+ Primitives & Blocks\n

\n
\n\n \n\n {/* 3 Highlight Bullet Points with Icons */}\n
\n
\n
\n \n
\n
\n

Zero Dependency Footprint

\n

\n Every component lives directly in your codebase. No semver conflicts or registry lock-in.\n

\n
\n
\n\n
\n
\n \n
\n
\n

OKLCH Dark Mode Tokens

\n

\n Calibrated light & dark surfaces with verified WCAG AA contrast and fluid spring physics.\n

\n
\n
\n\n
\n
\n \n
\n
\n

Dual-Framework Registry

\n

\n First-class TypeScript support for both Vue 3 (Reka UI) and React (Radix UI).\n

\n
\n
\n
\n\n \n\n {/* Email Footer */}\n
\n
\n Documentation\n ·\n GitHub\n ·\n Discord\n ·\n Preferences\n
\n

UIPKGE Inc. · 548 Market St, Suite 29314, San Francisco, CA 94104

\n

\n You received this email because you subscribed to UIPKGE updates.{' '}\n Unsubscribe anytime.\n

\n
\n
\n
\n
\n )}\n
\n
\n\n {/* Right Column: Quality & Deliverability Inspector (w-72 / col-span-4) */}\n
\n {/* Card 1: Spam Score Analyzer */}\n \n \n
\n Spam Score Analyzer\n \n
\n \n Predictive inbox delivery rating based on content heuristics.\n \n \n \n {/* Score Meter Display */}\n
\n
\n 0.4\n / 10.0 scale\n
\n
\n \n Excellent inbox probability\n
\n {/* Gauge Meter Bar */}\n
\n
\n
\n
\n\n {/* Checklist checks */}\n
\n
\n \n \n Spam trigger words\n \n 0 detected\n
\n
\n \n \n Text-to-image ratio\n \n 92% text (Safe)\n
\n
\n \n \n RFC 8058 Unsubscribe\n \n Included\n
\n
\n \n \n Valid HTTPS links\n \n 6 links checked\n
\n
\n \n \n\n {/* Card 2: Domain Authentication Badges */}\n \n \n Domain Authentication\n Security headers verified against DNS records.\n \n \n
\n SPF Record\n \n Pass\n \n
\n
\n DKIM Signature\n \n Pass (2048-bit)\n \n
\n
\n DMARC Policy\n \n Pass (p=reject)\n \n
\n
\n TLS Handshake\n \n TLS 1.3 Active\n \n
\n \n \n\n {/* Card 3: Dark Mode & Accessibility */}\n \n \n Contrast & Dark Mode\n Client dark mode and WCAG contrast conformance.\n \n \n
\n Dark Mode Contrast\n \n 100% WCAG AA\n \n
\n
\n Text Contrast Ratio\n 14.8:1 (AAA)\n
\n
\n Plaintext Fallback\n Auto-generated\n
\n \n \n\n {/* Card 4: Email Telemetry */}\n \n \n Email Telemetry\n Reading metrics and payload optimization.\n \n \n
\n Estimated Reading Time\n 45 sec · 185 words\n
\n
\n Payload Size\n 14.2 KB (102 KB safe)\n
\n
\n Inline Assets\n 1 Vector SVG\n
\n \n \n
\n
\n
\n )\n}\n\nexport default EmailTemplatePreviewer\n", "type": "registry:block", "target": "~/components/blocks/EmailTemplatePreviewer.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Resend and Klaviyo style marketing email designer preview with viewport switcher, subject line tester, deliverability & spam score analyzer, and live test dispatch modal.", "categories": [ "marketing", "preview", "app" ] }