Install

``bash
npm install @importcsv/react zod
`

Quick Start

`tsx
import { useState } from 'react';
import { CSVImporter } from '@importcsv/react';
import { z } from 'zod';

const schema = z.object({
name: z.string().min(1),
email: z.string().email(),
});

function App() {
const [isOpen, setIsOpen] = useState(false);

return (
<>
setIsOpen(true)}>Import CSV

schema={schema}
modalIsOpen={isOpen}
modalOnCloseTriggered={() => setIsOpen(false)}
onComplete={(result) => console.log(result.rows)}
/>

);
}
`

Features

- Column mapping — Auto-matches headers to your schema
- Zod validation — Type-safe with automatic error messages
- Large files — Virtual scrolling handles 100k+ rows
- ~100KB gzipped — Styles included

File formats: CSV, TSV, XLS, XLSX (Excel requires npm install xlsx)

Frameworks: React 16–19, Preact, Next.js

Theming

`tsx

`

Presets: default, minimal, modern, compact, dark, corporate, playful

Next.js / Preact

`tsx
// Next.js App Router
'use client';
import { CSVImporter } from '@importcsv/react';

// Preact
import { CSVImporter } from '@importcsv/react/preact';
``

AI Features (Backend Required)

With the ImportCSV backend:

- AI column matching
- AI error fixing
- Natural language transforms

Links

- Documentation
- GitHub
- Issues

License

MIT