DemoBuy

Getting Started with Email Marketing Kit

Last updated on 2026-08-27

The Email Marketing Kit is a production-ready Next.js template for building email marketing platforms. It ships with 34+ screens covering the complete email marketing lifecycle -- from composing campaigns in a block-based editor to monitoring deliverability across ISPs.

What's Included

The kit is organized into six functional areas:

  • Campaigns -- list, detail, block-based email editor, subject/preheader editor, audience picker, scheduling, template gallery, preview modes, and A/B testing
  • Automations -- automation list, visual node-graph flow builder canvas, trigger/action configuration, automation templates, activity log, and per-automation analytics
  • Audience -- subscriber list with search/filter, subscriber profile, segment builder with AND/OR rules, tags manager, list management, growth tools/forms, import tool, and suppression list
  • Analytics -- dashboard overview with KPI cards, campaign analytics, audience growth charts, revenue tracking, click map overlay, deliverability dashboard, domain authentication status, and bounce management
  • Deliverability -- domain authentication (SPF/DKIM/DMARC), ISP breakdown, inbox placement rates, bounce tracking, and complaint monitoring
  • Settings -- general settings, team management with roles, API key management, and billing/invoices

Prerequisites

Requirement Minimum Version
Node.js 18.17 or later
pnpm 9+ (npm or yarn also work)
Git Any recent version
Code Editor VS Code recommended

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> email-marketing-kit
cd email-marketing-kit

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000 to see the dashboard. No environment variables, no database, no backend -- everything runs on client-side seed data out of the box.

Tech Stack

Technology Version Purpose
Next.js 16.1 React framework with App Router
React 19.2 UI library
Tailwind CSS 4.x Utility-first CSS with oklch color tokens
shadcn/ui 4.x Component scaffolding (Base UI primitives)
Recharts 3.8 Charts and data visualization
TypeScript 5.x Type safety throughout
Lucide React 0.577 Icon library
next-themes 0.4 System-aware dark mode
cmdk 1.1 Command palette
Sonner 2.x Toast notifications

Zero-Config Setup

The Email Marketing Kit requires zero environment variables and zero backend dependencies. All data is provided by data/seed.ts, which contains realistic mock data for campaigns, subscribers, automations, analytics, and more. This means you can:

  • Run the kit locally with a single command
  • Deploy to Vercel without any configuration
  • Focus entirely on customizing the UI before wiring up your backend

Next Steps

Next

Installation