Data Import

A 4-step wizard for importing CSV and JSON data with column mapping and validation.

Preview

Features

4-step wizard: Upload → Map Columns → Validate → Import
Simple dot indicator for progress
Drag & drop file upload with click-to-browse
Paste data directly from clipboard
Auto-detection of CSV and JSON formats
Column mapping with target field selection
Data validation with row-level error reporting
Completion summary with import statistics
Mobile-friendly modal with stacked controls and full-width actions

Sample Data

Try these sample formats in the import dialog:

CSV Format

contacts.csv

csv

Full Name,Email,Phone,Company,Role
John Doe,john@example.com,555-0100,Acme Inc,Manager
Jane Smith,jane@example.com,555-0101,Tech Corp,Developer

JSON Format

contacts.json

json

[
  {
    "Full Name": "John Doe",
    "Email": "john@example.com",
    "Phone": "555-0100",

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
data-import.tsx	components/onboarding/data-import/data-import.tsx
data-import-context.tsx	components/onboarding/data-import/data-import-context.tsx
import-steps.tsx	components/onboarding/data-import/import-steps.tsx
step-upload.tsx	components/onboarding/data-import/step-upload.tsx
step-mapping.tsx	components/onboarding/data-import/step-mapping.tsx
step-validate.tsx	components/onboarding/data-import/step-validate.tsx
step-progress.tsx	components/onboarding/data-import/step-progress.tsx
types.ts	components/onboarding/data-import/types.ts
index.ts	components/onboarding/data-import/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add dialog button progress

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. data-import.tsx

data-import.tsx

tsx

"use client";

import { Dialog, DialogContent } from "@/components/ui/dialog";
import { DataImportProvider, useDataImport } from "./data-import-context";
import { ImportSteps } from "./import-steps";

2. data-import-context.tsx

data-import-context.tsx

tsx

"use client";

import {
  createContext,
  useContext,

3. import-steps.tsx

import-steps.tsx

tsx

"use client";

import { cn } from "@/lib/utils";
import { useDataImport } from "./data-import-context";
import type { ImportStep } from "./types";

4. step-upload.tsx

step-upload.tsx

tsx

"use client";

import { useCallback, useRef, useState } from "react";
import { UploadSimple as Upload, FileText } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";

5. step-mapping.tsx

step-mapping.tsx

tsx

"use client";

import { ArrowRight } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import {

6. step-validate.tsx

step-validate.tsx

tsx

"use client";

import { Check, WarningDiamond as AlertTriangle } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import {

7. step-progress.tsx

step-progress.tsx

tsx

"use client";

import { useEffect } from "react";
import { Check } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";

8. types.ts

types.ts

tsx

export type ImportStep = "upload" | "mapping" | "validate" | "progress";
export type ImportFormat = "csv" | "json";
export type ImportStatus = "idle" | "importing" | "complete" | "error";

export interface ImportColumn {

9. index.ts

index.ts

tsx

export { DataImport } from "./data-import";
export { DataImportProvider, useDataImport } from "./data-import-context";
export type {
  ImportStep,
  ImportFormat,
  ImportStatus,
  ImportColumn,
  ImportRow,
  ValidationError,
  ImportState,
  DataImportContextValue,
  DataImportProps,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/contacts.tsx

tsx

import { useState } from "react";
import { DataImport } from "@/components/onboarding/data-import";
import type { ImportRow } from "@/components/onboarding/data-import";

const targetFields = ["Full Name", "Email", "Phone", "Company", "Role"];

Wizard Steps

Step	Component	Description
1. Upload	StepUpload	File upload or paste data
2. Map Columns	StepMapping	Match source to target fields
3. Validate	StepValidate	Preview and validate data
4. Import	StepProgress	Progress and completion