I added a CSV contact importer to a shadcn registry

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 

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> ); } 

Save this as contacts.csv:

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

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.