Skip to content
codexa

Dashboards · React

Marketing campaigns

Leads by channel, spend per campaign and cost per lead for a small in-house marketing team.

Use this templateRemix
Marketing campaigns starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A campaign dashboard for an outdoor gear brand: leads from paid and organic channels by month, spend split by channel, and every live campaign with its cost per lead. All numbers live in src/dashboard.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/dash-marketing

Explorer 13

src/dashboard.ts
src/dashboard.ts
import type { Dashboard } from "./types"; /** Everything this dashboard shows. Edit freely. */export const dashboard: Dashboard = {  "brand": "Saltmarsh",  "user": {    "name": "Imogen Clarke",    "role": "Marketing Lead"  },  "nav": [    {      "label": "Overview",      "icon": "chart",      "href": "#overview"    },    {      "label": "Leads",      "icon": "bolt",      "href": "#trends"    },    {      "label": "Channels",      "icon": "globe",      "href": "#breakdown"    },    {      "label": "Campaigns",      "icon": "mail",      "href": "#table"    },    {      "label": "Activity",      "icon": "clock",      "href": "#activity"    }  ],  "title": "Campaign performance",  "subtitle": "September 2026 · Saltmarsh Outdoor",  "ranges": [    {      "label": "6M",      "points": 6    },    {      "label": "12M",      "points": 12    }  ],  "kpis": [    {      "label": "Leads",      "value": "2,100",      "delta": "9.4%",      "up": true    },    {      "label": "Ad spend",      "value": "$38,400",      "delta": "3.2%",      "up": true,      "upIsGood": false    },    {      "label": "Cost per lead",      "value": "$18.29",      "delta": "$1.21",      "up": false,      "upIsGood": false    },    {      "label": "Lead to order",      "value": "3.8%",      "delta": "0.4 pts",      "up": true    }  ],  "chart": {    "title": "Leads by month",    "type": "line",    "labels": [      "Oct",      "Nov",      "Dec",      "Jan",      "Feb",      "Mar",      "Apr",      "May",      "Jun",      "Jul",      "Aug",      "Sep"    ],    "series": [      {        "name": "Paid",        "values": [          820,          870,          760,          910,          950,          1010,          1060,          1120,          1080,          1170,          1130,          1240        ]      },      {        "name": "Organic",        "values": [          540,          560,          610,          590,          620,          650,          700,          720,          760,          780,          790,          860        ]      }    ]  },  "side": {    "title": "Spend by channel",    "items": [      {        "label": "Paid search",        "value": "$14,200",        "pct": 37      },      {        "label": "Paid social",        "value": "$11,500",        "pct": 30      },      {        "label": "Display",        "value": "$6,100",        "pct": 16      },      {        "label": "Podcasts",        "value": "$4,300",        "pct": 11      },      {        "label": "Email",        "value": "$2,300",        "pct": 6      }    ]  },  "table": {    "title": "Campaigns",    "columns": [      "Campaign",      "Channel",      "Spend",      "Leads",      "Cost per lead",      "Status"    ],    "statusColumn": 5,    "tones": {      "Live": "good",      "Scheduled": "accent",      "Paused": "warn",      "Ended": "neutral"    },    "rows": [      [        "Autumn Trail Sale",        "Paid search",        "$9,800",        "612",        "$16.01",        "Live"      ],      [        "Rain Shell Relaunch",        "Paid social",        "$7,400",        "389",        "$19.02",        "Live"      ],      [        "Hut-to-Hut Guide",        "Email",        "$1,200",        "341",        "$3.52",        "Live"      ],      [        "Winter Layering",        "Podcasts",        "$4,300",        "118",        "$36.44",        "Live"      ],      [        "Cart retargeting",        "Display",        "$3,600",        "204",        "$17.65",        "Paused"      ],      [        "Summer Clearance",        "Paid social",        "$4,100",        "236",        "$17.37",        "Ended"      ],      [        "Holiday Gift Guide",        "Email",        "$0",        "0",        "—",        "Scheduled"      ]    ]  },  "feed": {    "title": "Activity",    "items": [      {        "text": "Imogen paused Cart retargeting after cost per lead passed $17",        "time": "3 hours ago"      },      {        "text": "Hut-to-Hut Guide email sent to 18,240 subscribers",        "time": "Yesterday"      },      {        "text": "Holiday Gift Guide scheduled for Nov 14",        "time": "2 days ago"      },      {        "text": "Rain Shell Relaunch: new video ads approved",        "time": "4 days ago"      }    ]  }};

Remix

Remix this template

Describe what to change and the agent starts from Marketing campaigns's files. The box is already started for you: finish “Start from Marketing campaigns and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on Marketing campaigns

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates