shadcn.io is not affiliated with official shadcn/ui
No Reports Empty State Block for React Aria
A 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.
Installation
Overview
Let someone preview a report before it exists and keep the sample, with this no reports empty state for React with React Aria. The page is Folioleaf, a reporting tool: the page's rails and one band across the screen split in two. At the start, a heading, one sentence, a segmented control to choose Weekly summary, Revenue or Usage, and the Shine Button, the only colored control, Generate sample. At the end, a drawn clipboard holds a sheet that names the chosen report, its period and four typed rows, with dashes where the figures go and a dashed edge because nothing has been generated. Generate sample fills in the figures, works out each row's change from its two weeks, turns the edge solid and brings in Download CSV, a download trigger that saves a real file of exactly those rows. The three sheets share one cell, so the page keeps its height whichever is chosen, and the corners come from Guides.
FAQ
What stays in the page, and how do I make it real?
The sheets are typed data: each report has four rows with this week's and last week's figures for the seven days to Friday 9 October 2026, and every sheet says Sample. Generating one only changes the page's state, a reload or Start over puts the clipboard back, and nothing is sent. To make it real, build the report from your own data where the code says so and give the download trigger that report's rows.
What is in the downloaded file?
It is the only real file the block makes. Download CSV saves folioleaf-weekly-summary.csv, folioleaf-revenue.csv or folioleaf-usage.csv, with a header row and one row per row on the sheet: the metric, this week, last week and the change in words ("Up 20%"). Any cell with a comma or a quotation mark is quoted, and a cell that starts with an equals sign, a plus, a minus or an at sign would be saved as text so a spreadsheet cannot read it as a formula. Revenue's total, net revenue, is added up from its lines, counting refunds against it.
Why can I generate each report separately?
Each report keeps its own state: generating Revenue leaves Weekly summary dashed. The button reads Sample generated, quietly, for a report that is done, and pressing it says so; Download CSV stays unavailable, and says why when pressed, until the chosen report has been generated, after which focus moves to it.
Is it usable with a keyboard and a screen reader?
The choice is a real group of three options with arrow-key movement, and each sheet is a real table with a caption, column headers and row headers; the dashes read as Not generated. The three sheets are unseen copies, so only the chosen one is reachable. A polite status line says what each press did, and the clipboard drawing's frame is hidden from assistive technology.