Installation
Last updated on 2026-08-27
This guide walks you through setting up the Email Marketing Kit from scratch.
System Requirements
- Node.js 18.17 or later
- pnpm 9+ (npm or yarn also work)
- Git for cloning the repository
Step 1 -- Clone the Repository
Use the private repository URL from your purchase confirmation email:
git clone <your-repo-url> email-marketing-kit
cd email-marketing-kit
Step 2 -- Install Dependencies
pnpm install
This installs Next.js 16, React 19, Tailwind CSS 4, shadcn/ui, Recharts, and all utility libraries.
Key Dependencies
| Package | Purpose |
|---|---|
next 16.x |
React framework with App Router |
react 19.x |
UI library |
tailwindcss 4.x |
CSS framework with oklch tokens |
shadcn 4.x |
Component scaffolding |
@base-ui/react 1.x |
Accessible headless primitives |
recharts 3.x |
Charts and data visualization |
lucide-react |
Icon library |
next-themes |
Dark mode support |
cmdk |
Command palette |
sonner |
Toast notifications |
react-resizable-panels |
Resizable panel layouts |
class-variance-authority |
Component variant styling |
Step 3 -- Start the Dev Server
pnpm dev
Visit http://localhost:3000 to see the app. You will be redirected to the dashboard at /dashboard.
No environment variables are needed. The entire app runs on client-side seed data.
Step 4 -- Verify the Setup
Navigate through the key sections to confirm everything is working:
/dashboard-- overview with KPI cards, charts, and recent activity/campaigns-- campaign list with filtering and status badges/campaigns/builder-- block-based email editor/automations-- automation list and flow builder canvas/audience/subscribers-- subscriber management table/analytics-- analytics dashboard with charts/analytics/deliverability-- deliverability monitoring/settings-- general settings page
Available Scripts
| Command | Description |
|---|---|
pnpm dev |
Start dev server on port 3000 |
pnpm build |
Create optimized production build |
pnpm start |
Run the production server |
pnpm lint |
Run ESLint checks |
Folder Structure Overview
email-marketing-kit/
├── app/
│ ├── (app)/ # All authenticated routes
│ │ ├── dashboard/ # Main dashboard
│ │ ├── campaigns/ # Campaign management
│ │ ├── automations/ # Automation flows
│ │ ├── audience/ # Subscriber management
│ │ ├── analytics/ # Analytics & deliverability
│ │ ├── settings/ # App settings
│ │ ├── notifications/ # Notification center
│ │ ├── layout.tsx # Shared sidebar + header layout
│ │ └── page.tsx # Redirect to /dashboard
│ ├── globals.css # Design tokens & base styles
│ ├── layout.tsx # Root layout (fonts, theme)
│ └── page.tsx # Landing redirect
├── components/
│ ├── ui/ # shadcn/ui primitives (never modify)
│ ├── dashboard/ # Dashboard composites
│ ├── shared/ # Reusable composites
│ ├── layout/ # Sidebar, header, skip-link
│ └── a11y/ # Accessibility helpers
├── data/
│ └── seed.ts # All mock data
├── types/
│ └── index.ts # TypeScript interfaces
├── lib/
│ ├── format.ts # Formatting utilities
│ └── utils.ts # General utilities (cn, etc.)
└── public/ # Static assets
Deploy to Vercel
The Email Marketing Kit deploys to Vercel with zero configuration:
Option A: One-Click Deploy
- Push your customized code to a GitHub repository
- Go to vercel.com/new
- Import your repository
- Click Deploy -- no environment variables needed
Option B: Vercel CLI
# Install the Vercel CLI
pnpm add -g vercel
# Deploy from the project root
vercel
# For production deployment
vercel --prod
Build Settings (Auto-Detected)
| Setting | Value |
|---|---|
| Framework Preset | Next.js |
| Build Command | next build |
| Output Directory | .next |
| Install Command | pnpm install |
| Node.js Version | 18.x or later |
Troubleshooting
Port 3000 already in use:
pnpm dev -- -p 3001
TypeScript errors after installation:
npx tsc --noEmit
Check that tsconfig.json path aliases match your project structure.
Build fails with memory errors:
NODE_OPTIONS="--max-old-space-size=4096" pnpm build