shadcn.io is not affiliated with official shadcn/ui
Data Export Ready Notification Block for Radix UI
A finished CRM export as a narrow file card: choose CSV or JSON to rewrite the file name and its estimated size, then download a real file of the first five contacts.
Installation
Overview
Tell someone their export is ready and let them choose what they get, with this export notification for React with Radix UI. It is Exportnook, a CRM, in a narrow framed panel with a plus mark on each corner. The first band is the file in a Data List: its name, how many contacts it covers, a size estimate worked out from the file's own text, and the day it stays available until with the days to go, under a quiet Badge. The second band chooses the format in a two-way Toggle Group, CSV or JSON, which rewrites the name and the size in place. The foot ends in "Download", the one Shine Button and a real Download Trigger of the first five contacts in the chosen format. Guides draw the lines. For data exports, reports and any file you hand over once it is built.
FAQ
How do I fill it with my own export?
Edit CONTACTS (the rows the demo file holds), WHOLE_COUNT (how many contacts the export covers), EXPIRES and the fixed AS_OF. The size estimate multiplies the bytes per contact in the file you would get by the whole count, so it differs between CSV and JSON; the days to go are worked out from the two dates. The contacts and addresses are made up, and the addresses use the ranges reserved for examples.
What is in the downloaded file?
The first five contacts, with their id, name, email, company, stage and creation date. CSV gets a header row, quotes any cell with a comma, a quote or a line break, and keeps a cell that starts with =, +, - or @ as text so a spreadsheet cannot read it as a formula. JSON is the same five records, indented. The file is built in the browser and saved by the download trigger as exportnook-contacts.csv or .json; nothing is uploaded.
What stays local, and how do I make it real?
Everything: the format, the name and the estimate are state in this page, and the status line says what was saved. In your app point data at the file your server built (a URL, or a function that returns a blob), keep fileName and mimeType, and let the expiry come from your export record.
Can I end up with no format chosen?
No. The two formats are a single-choice group that is never empty: pressing the chosen one again changes nothing, and the arrow keys move between the two. Changing the format never changes the card's height, because the file name and the size occupy the same cells.
Is it accessible?
The group is named "Export format", each choice shows its icon and its word, a single polite status line says what changed ("JSON chosen: exportnook-contacts.json, about 230 KB"), and the Download button is a native button inside the download trigger, so it works with a keyboard and a screen reader like any other.