FAQ
Last updated on 2026-08-27
Does it include email sending?
No. The Email Marketing Kit is a frontend-only template. All data is provided by client-side seed data in data/seed.ts. You will need to connect your own email service provider (ESP) for actual email delivery. See the Customization guide for examples of integrating SendGrid, Resend, and AWS SES.
Can I customize the colors?
Yes. The entire color scheme is driven by oklch color tokens in app/globals.css. You can change the primary accent by updating a single hue value (default is 115, chartreuse-green). See the Design Tokens and Customization guides for step-by-step instructions.
For example, to switch to a blue theme, change hue 115 to 220 across the primary, ring, chart-1, and sidebar tokens.
Is it responsive?
Yes. Every screen is fully responsive from 375px mobile to 1280px+ desktop. The sidebar collapses into a slide-out drawer on mobile. Tables, charts, and forms adapt to smaller viewports. The email editor supports desktop and mobile preview modes.
How do I add real authentication?
The kit does not include authentication by default. You can integrate any auth solution:
- NextAuth.js -- wrap the app with a session provider
- Clerk -- add the Clerk provider and middleware
- Supabase Auth -- add Supabase client and auth checks
- Firebase Auth -- add Firebase auth provider
The (app) route group layout (app/(app)/layout.tsx) is the natural place to add an auth check. See the Customization guide for more details.
What about the block editor -- can I extend it?
Yes. The block editor supports 14 content block types out of the box (text, image, button, divider, columns, social, video, HTML, product, countdown, menu, header, hero, footer). To add a new block type:
- Extend the
EmailBlocktype union intypes/index.ts - Add seed data for the new block in
data/seed.ts - Add rendering logic in
app/(app)/campaigns/builder/page.tsx - Add the block to the editor palette
See the Customization guide for a complete walkthrough of adding a testimonial block type.
Can I connect to Mailchimp, SendGrid, or another ESP API?
Yes. The kit is designed to be connected to any email backend. The seed data provides the exact data shapes you need to implement real API calls. Common integration patterns:
| ESP | Package | Docs |
|---|---|---|
| SendGrid | @sendgrid/mail |
sendgrid.com/docs |
| Resend | resend |
resend.com/docs |
| AWS SES | @aws-sdk/client-ses |
aws.amazon.com/ses |
| Postmark | postmark |
postmarkapp.com/developer |
| Mailgun | mailgun.js |
mailgun.com/developers |
Replace seed data imports with API calls and add your API keys as environment variables. See the Customization guide for code examples.
Do I need any environment variables or backend setup?
No. The template runs entirely on client-side seed data. Run pnpm install && pnpm dev and everything works out of the box. When you are ready to connect a real backend, you will add environment variables for your ESP, database, and auth provider.
What tech stack does it use?
| 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 tokens |
| shadcn/ui | 4.x | Component scaffolding (Base UI) |
| Recharts | 3.8 | Charts and data visualization |
| TypeScript | 5.x | Type safety throughout |
| Lucide React | 0.577 | Icon library |
| next-themes | 0.4 | Dark mode support |
See the Getting Started guide for the full tech stack table.
How many screens are included?
34+ screens organized across six areas:
| Area | Screens |
|---|---|
| Dashboard | 1 |
| Campaigns | 8 |
| Audience | 8 |
| Automations | 5 |
| Analytics | 7 |
| Settings | 4 |
| Other | 1 |
See the Screens page for the complete catalog with routes and descriptions.
Is dark mode included?
Yes. Every screen supports both light and dark mode. Dark mode is system-aware by default (follows the OS preference) and can be toggled manually via the theme toggle button in the header. The color system uses oklch tokens that invert lightness while preserving hue and chroma.
Can I use this for multiple projects?
This depends on your license tier:
| License | Projects | Developers |
|---|---|---|
| Solo | 1 project | 1 developer |
| Team | Unlimited projects | Up to 5 developers |
| Agency | Unlimited client projects | Unlimited developers |
All licenses include lifetime updates.
Can I deploy this to Vercel?
Yes. The kit deploys to Vercel with zero configuration. Push your code to GitHub, import the repository on Vercel, and click Deploy. No environment variables are needed for the default seed-data setup. See the Installation guide for deployment instructions.
Is it accessible?
Yes. The kit meets WCAG 2.1 AA standards. This includes:
- Color contrast ratios meeting minimum thresholds
- Full keyboard navigation for all interactive elements
- Screen reader support with ARIA landmarks and live regions
- Focus management with visible focus indicators
- Reduced motion support via
prefers-reduced-motion - Skip navigation link on every page
- 44px minimum touch targets
- Status indicators that use color + text + icon (never color alone)
See the Accessibility guide for complete details.
How do I add a database?
Replace seed data imports with database queries. The TypeScript interfaces in types/index.ts define the exact data shapes your database tables should match. Common options:
- Prisma with PostgreSQL, MySQL, or SQLite
- Drizzle ORM with any SQL database
- Supabase for PostgreSQL with real-time subscriptions
- PlanetScale for serverless MySQL
See the Customization guide for migration strategy details.