ImportCSV - AI-native CSV importer for developers

Bolt.new CSV import: Add spreadsheet upload to your app

TL;DR: Paste this prompt into Bolt.new:

Add a CSV import feature to my app using the @importcsv/react package.

Install these packages:
- @importcsv/react
- zod

Create a CSV importer that:
1. Opens as a modal when users click an "Import Data" button
2. Lets users upload CSV or Excel files
3. Maps columns to these fields: name (required), email (required email format), company (optional)
4. Shows validation errors before import
5. Saves the imported data to my database

Use this Zod schema for validation:
const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  company: z.string().optional()
});

Style the import button to match my app's existing design.

Then your users can upload spreadsheets. Done.

The problem

You built your app in 5 minutes with Bolt.new. Now you need users to upload their data.

Bolt.new's built-in database feature handles admin-level export and import through the dashboard. But that's for you, the developer. What about your users? They need to upload their own spreadsheets directly in the app.

Building CSV import from scratch means handling:

Parsing edge cases (delimiters, encoding, multiline fields)
Building a column mapping UI
Validating data before it hits your database
Handling large files without browser crashes

That's not what you signed up for when you chose Bolt.new for rapid development.

The solution: One prompt

ImportCSV is a React package that handles all of this. Because Bolt.new supports npm packages through prompts, you can add a production-ready CSV importer by pasting a single prompt.

Here's what happens when you paste the prompt above:

Bolt installs @importcsv/react and zod packages
Bolt generates a React component with proper imports
Bolt wires up your database connection
Your users get a modal for uploading spreadsheets

Step-by-step guide

Step 1: Open your Bolt.new project

Go to bolt.new and open the project where you want to add CSV import. If you're starting fresh, create a new project first.

Step 2: Paste the prompt

Copy the prompt from the top of this article and paste it into the Bolt.new chat. Bolt will interpret your request and generate the code.

Tip from Bolt's official docs: "When building with Bolt, the quality of your results will often depend less on how well you know code and more on how clearly and effectively you can express your ideas through prompts."

Step 3: Review what Bolt generates

Bolt will create something like this:

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

const schema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email address'),
  company: z.string().optional()
});

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

  const handleImportComplete = async (data) => {
    // Bolt connects this to your database
    await db.insert('contacts', data);
  };

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Import Data
      </button>

      <CSVImporter
        modalIsOpen={isOpen}
        modalOnCloseTriggered={() => setIsOpen(false)}
        schema={schema}
        onComplete={(data) => {
          handleImportComplete(data);
          setIsOpen(false);
        }}
      />
    </div>
  );
}

Step 4: Test in preview mode

Click the preview button in Bolt.new to test your app. Click the "Import Data" button, upload a CSV file, and verify the data appears in your database.

Step 5: Publish

When everything works, publish your app. Your users can now upload their own spreadsheets.

Database options

Bolt.new works with two database options, and ImportCSV works with both.

Option 1: Bolt Database (default)

Bolt V2 includes unlimited databases. When you use the prompt above, Bolt will connect the importer to your Bolt Database automatically.

From Bolt's docs: "By default, new projects created with Claude Agent use Bolt databases."

Option 2: Supabase

If you've connected Supabase to your Bolt project, Bolt will generate Supabase-specific code instead:

const handleImportComplete = async (data) => {
  const { error } = await supabase
    .from('contacts')
    .insert(data);

  if (error) {
    toast.error('Import failed');
  } else {
    toast.success(`Imported ${data.length} contacts`);
  }
};

Note: Supabase integration in Bolt.new works with Vite projects only. Next.js projects are not supported for Supabase.

Alternative prompts

The prompt at the top of this article is for contact data. Here are variations for other use cases.

For product imports

Add a product CSV import feature using @importcsv/react. Let users upload spreadsheets with product name (required), price (required number), SKU (required), and description (optional). Validate the data and save to my products table.

Simplified version

If you want Bolt to make more decisions for you:

Add a CSV import button to my app that lets users upload spreadsheets with names, emails, and companies. Use the @importcsv/react package and validate that names and emails are required. Save the imported data to my database.

For inventory tracking

Add an inventory CSV import using @importcsv/react. Accept columns for item name (required), quantity (required number), location (required), and notes (optional). Save to my inventory table.

What ImportCSV handles

When you use ImportCSV through Bolt.new, your users get:

File parsing: CSV, XLS, and XLSX files work automatically
Column mapping: Users match their spreadsheet columns to your fields
Validation: Data is checked against your schema before import
Error handling: Clear messages for invalid rows
Large files: Support for 10,000+ rows with virtual scrolling

FAQ

Does this work with Bolt's built-in database?

Yes. Bolt will connect the ImportCSV component to your Bolt Database automatically. The imported data appears in your tables just like any other data.

Can I use this with Supabase instead?

Yes, if you've connected Supabase to your Bolt project. Note that Supabase integration only works with Vite projects in Bolt.new, not Next.js projects.

Can I customize the look of the importer?

Yes. ImportCSV supports theming. Add this to your prompt: "Use the dark theme for the CSV importer" or "Style the importer to match my app's colors."

How big a file can users import?

ImportCSV handles files with 10,000+ rows using virtual scrolling. The actual limit depends on your database and Bolt hosting plan.

Does it work with Excel files?

Yes. ImportCSV supports CSV, XLS, and XLSX files. Bolt will install the xlsx package if needed.

Do I need the Pro plan for this?

No. ImportCSV works on Bolt's free plan. The free plan includes 300K tokens daily and unlimited databases. Pro ($25/month) removes daily limits and adds custom domains.

Can I add more fields later?

Yes. Update the prompt with your new fields and Bolt will regenerate the component with the updated schema.

Ready to add CSV import to your Bolt.new app? Copy the prompt above and paste it into Bolt.new. Your users can start uploading spreadsheets in under a minute.

Try ImportCSV free