Split With Live Chart
A hero whose chart is a working shadcn component, wired for real data instead of a mockup.
A hero whose chart is a working shadcn component, wired for real data instead of a mockup.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Split With Live Chart is the hero whose chart is real. Beside the headline and CTAs sits a shadcn area chart in a shadowed panel with its headline value, tooltip and all, and the lede says the quiet part out loud, this is a live component, not a screenshot, wire it and it keeps drawing itself.
Built on ui/chart per the collection chart rule, the data array at the top is the swap point. It differs from split-with-analytics-dashboard exactly there, that hero draws a mockup, this one ships the working chart for products that can feed it.
Reach for this block when your hero claim is the chart itself and you can wire real or representative data at integration, analytics products demoing with their own telemetry. Use the mockup hero when the data is fictional, a live component drawing fake numbers forever is the worst of both.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is attributed revenue as the opening argument. Other live heroes:
Tip: keep one headline number beside the chart, the panel needs a verdict and the chart needs a context, they trade.