shadcn.io is not affiliated with official shadcn/ui
Data Export Ready Notification Block for React
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 Base 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.
Related
- Pro
Data Export Settings
Backups and exportsA data export panel built around a tree of what an account holds, where ticking a part adds what it depends on and says so, with a format control, the size, time and file count it adds up to, and a request list that queues one archive at a time.
- Pro
Export requests as a lifecycle: a request checked with the password, a four-stage track that moves one stage per press, and a real sample file to download once it is ready.
- Pro
Export Ready Success
Backups and exportsA full-height confirmation page for a finished export: a ring with the hours that remain of the link's 48, the file card, notebook, note and word counts, a real zip built in the browser to download and a link that really copies.
- Pro
A finished bulk import as a two-part result bar with counts, a collapsible table of the sixteen rows that failed, and a real CSV error report you can download.
- Pro
Export Table
Select and actA sales table with a search and row checkboxes and an Export dialog that asks which rows (visible, selected or all, with counts), whether to include hidden columns and a file name, then downloads a real CSV, shown open in place.
- Pro
Files shared with you in a table (name, owner, access) whose names open a drawn greyscale preview, with Request edit access that turns into Requested.