Sample Data Banner
Banner notifying users they are viewing sample data, with connect and clear actions and demo KPI cards below.
Banner notifying users they are viewing sample data, with connect and clear actions and demo KPI cards below.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Sample Data Banner is the honesty layer over a demo-seeded dashboard: a muted banner stating You are viewing sample data, with the caveat Nothing here is yours yet. All numbers, events, and names were generated so you can explore freely before connecting a real source, and two action buttons, Clear samples and Connect your source. Below it sit three placeholder KPI cards (Events today 84,210; Active users 1,284; Error rate 0.4%) each labeled Sample in italics so the fiction is never ambiguous.
The banner is self-contained markup, no state needed. The KPI cards give the block visual context so the banner reads naturally in isolation.
Reach for this block at the top of any dashboard that ships with demo fixtures, wired to a flag from your session that clears once the user connects a real source. Remove the banner and the Sample labels together.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the demo-mode notice over a seeded analytics dashboard. Other banner variants:
Tip: the honest caveat is the whole point; a banner that explains what is fake lets users explore without misreading the numbers as their own.