DEV Community

aimodels-fyi
aimodels-fyi

Posted on

I added a CSV contact importer to a shadcn registry

#react #nextjs #shadcn #csv

I build CSVJetty, an embedded CSV importer for React. I’ve published a shadcn registry item that adds a contact-import card and an account-free demo to your project.

The importer handles CSV upload, column mapping, validation, and inline correction. The example expects a name and email, with an optional company field.

The integration source is MIT licensed. The importer interface runs through the hosted CSVJetty service; production use requires an account and public importer key.

Install

In a React or Next.js project with shadcn already configured:

npx shadcn@latest add https://www.csvjetty.com/r/contact-csv-import.json
Enter fullscreen mode Exit fullscreen mode

The registry declares the csvjetty npm dependency and shadcn Card and Table dependencies.

Try it without an account

For a Next.js App Router page:

"use client";

import { ContactCsvImportDemo } from "@/components/contact-csv-import-demo";

export default function ContactsPage() {
  return (
    <main className="mx-auto max-w-3xl p-6">
      <ContactCsvImportDemo />
    </main>
  );
}
Enter fullscreen mode Exit fullscreen mode

Save this as contacts.csv:

Full Name,Work Email,Organization
Alex Chen,alex@example.com,Acme
Sam Rivera,not-an-email,Example Inc
Enter fullscreen mode Exit fullscreen mode

Upload it, match the columns, and correct the invalid email. The demo displays the latest received batch in your browser. It does not save contacts to a database.

You can also try the hosted demo before installing.

Connect it to your application

The installed ContactCsvImport component accepts a public importerKey and an onData callback. That callback is where your application saves the records.

The callback can await your API request. Throwing an error reports a failed save; returning row-level errors lets you identify records your backend rejected.

Your backend still needs to authenticate requests, validate records, and handle repeated deliveries safely.

The registry provides the contact-import integration and preview. Your application supplies persistence.

Source and integration instructions · Callback documentation

If you try it, I’d be interested in where the mapping or correction flow gets confusing.

Top comments (1)

Collapse
 
alexshev profile image
Alex Shev •

CSV importers look simple until headers, encoding, duplicates, and partial failures appear. A preview that shows row-level validation results and an explicit commit step gives users a recovery path without silently creating an inconsistent contact list.