shadcn.io is not affiliated with official shadcn/ui
Campaign ROI Dashboard Block for React Aria
Six campaigns with ROI and payback week in a list, and for the chosen one a ten-week chart of cumulative spend against cumulative revenue or gross margin with a ring where it pays back.
Installation
Overview
See when each campaign earns back what it cost, with this campaign ROI panel for React with React Aria. A hairline frame with a plus mark on each corner puts six campaigns in a list at the start (Brand search, Webinar series, Newsletter sponsorships, Partner co-marketing, Competitor search and Social retargeting), each with its ROI, the week it pays back and a "Best ROI" badge on the top one. The chosen campaign is drawn as cumulative spend, dashed, against cumulative revenue, solid, over ten weeks, with a ring where revenue crosses spend. A Toggle Group in the header counts revenue or gross margin at a typed 62%, which moves the ring and every ROI, and a definition list under the chart works the formula through for the campaign: spend, revenue, ROI, leads, customers and cost per customer. On a phone the list becomes a Native Select. It's built from Toggle Group, Native Select, Badge and Guides. For marketing attribution and finance reviews.
FAQ
How do I fill it with my campaigns?
Edit CAMPAIGNS. Each has ten weekly spend figures, ten weekly revenue figures, its leads and its customers. The running totals, the payback week, the ROI, the ring, the best campaign and the sentence in the header are worked out from those. MARGIN is the gross margin the second toggle option applies to revenue.
How is the payback week found?
The first week at whose end cumulative revenue (or margin) is at least cumulative spend. The ring sits where the two lines cross inside that week, found by a straight line between the week's ends. A campaign that has not caught up by week ten reads "No payback yet", and has no ring.
Why would I count gross margin?
Revenue pays back the media, margin pays back the media and the cost of what you sold. Switching to margin usually moves the payback later and can turn a positive ROI negative, which is the point of the toggle.
What stays local, and how do I wire it for real?
Everything: the weekly figures are typed for a fixed ten weeks and nothing is attributed. To make it real, export spend by campaign and week from your ad accounts and revenue by campaign and week from your attribution model, then replace the arrays. Decide the attribution window first, because it changes the payback week more than anything else.