A campaign report with a KPI band, a sortable channel table with inline spend and ROAS bars, a flowing conversion funnel, budget burn rings with pacing, top regions and gradient creative thumbnails ranked by CTR.
Last-click attribution, Oct 6 to Nov 4
| Channel | ||
|---|---|---|
| PSPaid search | $14.8K | 4.6x |
| SOPaid social | $12.3K | 4.3x |
| DIDisplay | $8,150 | 1.0x |
| AFAffiliates | $6,410 | 3.8x |
| POPodcasts | $4,620 | 3.3x |
| EMEmail | $1,940 | 25.1x |
| Total | $48.2K | 4.5x |
From first view to purchase, log scale
November budgets, 62% of the month elapsed
Projected month end $77.7K against $74.0K
Share of conversions by country
Ranked by click-through rate
npx shadcn@latest add https://hyperblur.dev/r/dashboard-marketing.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dashboard-marketing.tsx.
import { DashboardMarketing } from "@/components/hyperblur/dashboard-marketing"
<DashboardMarketing campaign="Holiday Launch 2026" defaultPeriod="30D" />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#ff6b57" | Accent color for the funnel, region bars, primary button, active campaign and focus rings. |
| brand | string | "Flare" | Product name shown at the top of the sidebar. |
| user | string | "Daniel Brooks" | Name used for the first collaborator avatar. |
| campaign | string | "Holiday Launch 2026" | Name of the featured campaign shown in the header and the sidebar list. |
| currency | string | "$" | Currency symbol used in every amount. |
| period | "7D" | "30D" | "QTD" | Controlled reporting period. Pair with onPeriodChange. | |
| defaultPeriod | "7D" | "30D" | "QTD" | "30D" | Initial period when uncontrolled. |
| onPeriodChange | (period: MarketingPeriod) => void | Called when the period toggle changes. |