---
title: "CSV column mapping"
description: "A three-step CSV import: upload, match columns to fields with sample values, then import once the required fields are mapped."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/csv-column-mapping
---

# CSV column mapping

A three-step CSV import: upload, match columns to fields with sample values, then import once the required fields are mapped.

Upload reads a dropped or picked CSV's header and first rows, and refuses other files with a reason. Columns are matched to fields by name, with two sample values each. A field takes one column, and Import stays off, with the reason beside it, until Shop name and Email are mapped. Skipped lists the columns left out, Preview shows the first rows under the field names, and Import ends with a summary.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/csv-column-mapping
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, button, card, dropzone, field, scroll-area, select, separator, spinner, table, tabs

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More onboarding blocks

All 3, with install commands: https://ui.edbn.me/docs/blocks/onboarding · https://ui.edbn.me/docs/blocks/onboarding.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt