shadcn.io is not affiliated with official shadcn/ui
No Analytics Empty State Block for Solid
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 Solid with Ark 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.