shadcn.io is not affiliated with official shadcn/ui
No Analytics Empty State Block for React
A web analytics page with no visits counted yet: an empty chart with a dashed baseline that a Preview with sample data switch fills with 14 typed days, a 7 or 14 day range and a legend worked out from the data.
Installation
Overview
Show an analytics page before its first visit and let the visitor preview the chart, with this no analytics empty state for React with Base UI. The page is Tallyhill, a web analytics tool: the page's rails and one band across the screen hold a heading, one sentence, a Switch named Preview with sample data, a toggle group for the last 7 or 14 days and a hand-built chart of the days to 9 October 2026, in foreground weights. Switched off, the chart is its axes with a dashed baseline and "No data yet"; switched on, an area for visits and a line for visitors are drawn from 14 typed days and labelled "Sample data", and the range re-slices them, with the totals and the busiest day under the chart worked out from the same series. The Shine Button, the only colored control, is a link, Set up analytics. The band's corners come from Guides, and everything moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
Everything stays in the page. The 14 days are typed numbers (visits and the visitors behind them, with quiet weekends), nothing is measured and a reload or Start over switches the preview off. To make it real, replace the typed days with the counts your own collector stores and send Set up analytics to the page where your snippet is installed; the chart, the axis and the totals are all computed from the array they read.
How is the chart built, and why does it say Sample?
It is plain SVG and CSS, not a chart library: a path for the area, one for each line and one for the grid, with the axis labels placed as text over it. The top of the axis is the busiest of the 14 days rounded up, so changing the range changes the date labels and the lines, never the scale. Whenever data is drawn the chart says Sample data in its corner and its caption, so nobody mistakes it for a measurement.
What do the totals and the range do?
The 7 or 14 day range slices the typed series from its end, and the legend under the chart recalculates from the slice: total visits, total visitors and the busiest day, which is the first day with the most visits. With the switch off they read as dashes and say No data to assistive technology, and the chart's height does not change in either state.
Is it usable with a keyboard and a screen reader?
The switch and the range are real controls with names, and a polite status line says what each press changed ("Sample data on: 14 days, 5,362 visits."). The drawing itself is hidden from assistive technology and a sentence under it describes the same data in words, including the busiest day. The primary is a link, so it takes Enter.
How does it look on a phone?
The chart is 220 pixels tall including its axis, the legend is three cells across and the Set up analytics link is pinned to the foot of the screen beside Start over, so it is always on the first screen. The date labels thin out to every second or third day so none overlap at 320 pixels.
Related
- Pro
No Metrics Empty State
Data and analyticsA KPI dashboard with nothing tracked yet: four tick cards over four dial tiles on shared hairlines, where each pick turns a dashed needle solid and rolls a typed sample figure into its tile before Track marks them.
- Pro
No Reports Empty State
Data and analyticsA reporting tool's first screen: a segmented choice of Weekly summary, Revenue or Usage swaps a drawn clipboard sheet of typed rows, and Generate sample fills it and unlocks a Download CSV that saves a real file.
- Pro
No Performance Data Empty State
Data and analyticsA performance monitor's empty dashboard as the target before the data: tabs for four metrics, a chart of axes with a dashed flat line and target band, a slider that moves the target, a strip of four targets and one Set up monitoring button.
- Pro
Area Chart Hero Stats
Area and lineA rail-to-rail area chart for a farm-shop sales tool: twelve months of sales fading out toward the foot, with the latest month's figure and its change laid over the top corner.
- Pro
Sparkline Range Card Stats
SparklinesA price inside its 52-week range for a trading journal: a line between two labelled hairlines for the high and the low, today's close as a dot, and the position in the range as a percent and a meter.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.