ImportWizard
A four step wizard that imports rows from a CSV or pasted text. It maps columns to fields, previews and validates rows, then commits the valid ones.
Code
<ImportWizard fields={[ { key: "name", label: "Name", required: true }, { key: "email", label: "Email", type: "email", required: true }, ]} uniqueKey="email" onImport={async (rows) => api.import(rows)}/>Files · beta
Live examples and controls: ImportWizard in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/import-wizard.jsonUpload, map, review, import. Parsing and validation run in the browser with no dependencies; your
onImport only receives rows that passed.
When to use
- Bulk creating contacts, products or any records from a spreadsheet.
When not to use
- A single file with no mapping: use
Dropzone. - Excel workbooks directly: save as CSV first; XLSX parsing is not built in.
Import
import { ImportWizard } from "@fadymondy/nasaq/web";Quick start
<ImportWizard
fields={[
{ key: "name", label: "Name", required: true },
{ key: "email", label: "Email", type: "email", required: true },
]}
uniqueKey="email"
onImport={async (rows) => api.import(rows)}
/>Anatomy
ImportWizard data-slot="import-wizard"
├─ Stepper Upload, Map columns, Review, Import
├─ Upload Dropzone, paste box, template download
├─ Map one Select per field, guessed from headers and aliases
├─ Review counts, issues by line, "skip invalid rows" Checkbox, Table preview
└─ Import Progress, result counts and per line failuresAPI
| Prop | Type | Default | Description |
|---|---|---|---|
fields | ImportField[] | required | { key, label, type?, required?, aliases? }. Types: text, email, phone, number, date, url. |
onImport | (rows) => Promise<ImportResult | void> | required | Return { imported, failed?, error? }. |
uniqueKey | string | none | Field whose repeats are flagged as duplicates. |
maxRows | number | 5000 | Row limit. |
maxSize | number | 5 MB | File size limit in bytes. |
onDone | () => void | none | Called from the last step. |
labels | ImportWizardLabels | en / ar | Every string. |
Examples
- Aliases:
aliases: ["e-mail", "البريد"]lets the header guess match Arabic and variant headers.
Accessibility
The Stepper marks the current step; each mapping Select has a label; issues are text with line numbers.
RTL & i18n
English and Arabic built in. Cell values and file names render left-to-right in their own isolate.
Styling & tokens
Uses Table, Progress, Alert and Badge tokens; nothing custom.
Do / Don't
- Do validate again on the server; the browser check is a convenience.
- Do not promise other sources (vCard, Google, WhatsApp) here: only CSV, TSV and pasted text are supported.
Related
Lab
https://docs.nasaqui.com/?path=/docs/components-files-import-wizard--docs
FileUpload
Dropzone with type, size and count validation, a file list with per-file progress, remove and retry, and a single-image upload with a thumbnail. You run the upload; it holds the state.
TrashBin
The trash of an app, listing deleted items with who deleted them and a retention countdown, with restore, delete forever and empty trash behind confirmations, built on EntityList.