shadcn.io is not affiliated with official shadcn/ui
Import and Export CRUD Block for Vue
A contact list with an Import or Export strip: paste or read CSV lines, map the columns, fix a bad value in place and import with an Undo, or pick the columns and download a real CSV of the list.
Installation
Overview
Move contacts in and out of a CRM with this import and export panel for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a Segment Group that switches between Import and Export over one list. Import takes CSV lines in a Textarea, pasted or read from a .csv file you choose (read in the tab, 200 KB at most, never sent anywhere); three selects map the header's columns to name, email and role, and Check lines lists every row with a status. A bad line says why, "Line 4: email has no @", and the bad value is an Editable you fix in place. Import adds the clean rows to the list marked New with "Imported 5 rows" and an Undo. Export has a Checkbox per column, a preview of the first lines and a real CSV, a Blob made in the tab, of the list as it is now. One Shine Button changes its label with the mode. For CRMs, mailing lists and any data that arrives as a sheet.
FAQ
Which CSV does it accept?
A header line, then one contact per line, with commas between values. A value can be quoted to hold a comma. The three selects choose which header column feeds name, email and role; they start on the columns whose header matches, or the first three, and changing one re-reads the lines. Blank lines are skipped, and line numbers count the header as line 1.
Which lines are refused, and how do I fix one?
A line is refused when the name is empty, the email has no @ or looks incomplete, the email is already in the list or repeats an earlier line, or the role is not one of Customer, Lead, Partner or Supplier. Each refused line names itself and the reason, and shows an Editable for the one bad value; saving a value that still fails keeps the old one and says why. Import stays on hold until every line is ready.
Does it read my file, and what leaves the browser?
Choosing a file reads its text in the tab with the File API into the field, so you can still edit it; nothing is uploaded. A file that is not a .csv or is over 200 KB is refused with a line saying so. The export is built the same way: a Blob and a temporary link, no request.
What does Undo import remove?
The rows of the last import, nothing else. The list goes back to what it was, the New marks go with the rows, and focus returns to the list. Importing again, or any later import, replaces the Undo.
What stays local, and how do I wire it to a real API?
The contacts are React state in this tab and a reload brings back the original five. In your app send the checked rows to your API in runImport, show the server's per-row refusals in the same list, and let the export call your endpoint when the list is too large to hold in the page.