CSV Importer

Multi-step CSV import workflow with column mapping, data validation, and row correction.

@drift-ui/csv-importerRegistry JSONGitHubOpen in v0
Upload CSV File
Upload your UTF-8 encoded .csv file to begin importing data.

Keyboard

EnterSpace
Upload file or advance step
Tab
Move between mapping selectors and table cells
Escape
Cancel or reset current step

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

csv-importer-usage.tsx
"use client"

import { CsvImporter } from "@/components/ui/csv-importer"

export function CustomerImport() {
  return (
    <CsvImporter
      fields={[
        { id: "name", label: "Full Name", required: true },
        {
          id: "email",
          label: "Email",
          required: true,
          validate: (val) => (val.includes("@") ? true : "Invalid email address"),
        },
        { id: "role", label: "Role" },
      ]}
      onComplete={(rows) => {
        console.log("Imported clean rows:", rows)
      }}
    />
  )
}

CsvImporter

Multi-step CSV import wizard with file upload, column mapping, data validation with inline cell fixing, and import confirmation.

Prop
fieldsRequiredCsvField[]Target application field definitions with id, label, required flag, description, validate function, and transform function.
onCompleteRequired(rows: Record<string, unknown>[]) => voidCalled when import is confirmed with clean, validated, and transformed row objects.
onCancel() => voidCalled when the user resets or cancels the import process.
maxRowsnumberDefault10000Maximum number of data rows to parse on the main thread.
maxFileSizenumberDefault10485760Maximum file size in bytes (defaults to 10 MB).
sampleRowsCountnumberDefault3Number of sample row values to preview in the column mapping step.
autoMapbooleanDefaulttrueWhether to automatically suggest column mappings matching CSV headers against field ids and labels.
stepnumberControlled active step index (0 to 3).
defaultStepnumberDefault0Initial active step index when uncontrolled.
onStepChange(step: number) => voidCalled when the active step index changes.
defaultFileFileOptional initial File object to automatically parse upon mount.

Other props go to the <div>.

Basic contact import

A simple 4-step import flow with required and optional fields.

Upload CSV File
Upload your UTF-8 encoded .csv file to begin importing data.

Custom validation rules

Enforce regex patterns and numeric constraints, with inline cell error indicators.

Upload CSV File
Upload your UTF-8 encoded .csv file to begin importing data.

Field transformations

Clean and normalize values into typed JavaScript objects (numbers, booleans, lowercase strings).

Upload CSV File
Upload your UTF-8 encoded .csv file to begin importing data.
components/ui/csv-importer.tsx
CtrlK