Product block

CSV Column Mapper

The screen between "file uploaded" and "data imported": source columns mapped to schema fields, with a sample value under each and required fields blocking the button.

280 lineslucide-reactAdded 25 Aug 2026Updated 10 Sept 2026

csv
import
mapping
spreadsheet
data

What's included

components/csv-import-mapper.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add csv-import-mapper

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

customers-export.csv

1,284 rows · 6 columns found

Step 2 of 3

Full Name

Ada Lovelace · Grace Hopper

Work Email

ada@analytical.co · grace@navy.mil

One address per row

Company

Analytical Engines · US Navy

Phone

+44 20 7946 0958 · +1 202 555 0114

Signed Up

2026-03-14 · 2026-04-02

Internal Notes

do not contact

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/csv-import-mapper.tsx

'use client'

/**
 * <CsvImportMapper> — the screen between "file uploaded" and "data imported".
 *
 * Every product that accepts a spreadsheet needs this and almost nobody
 * ships a good one. <FileDropzone> ends at "customers.csv, 2.4 MB, done",
 * which is the moment the actual problem starts: the file's columns are
 * named whatever the person exporting them called them, and none of those
 * names are yours.
 *
 * The three failure modes this is shaped against, in the order they bite:
 *
 *   Importing silently into the wrong field. "Name" mapped to `company`
 *   because it sorted first, and nobody notices until a mail merge greets
 *   four hundred people by their employer. Every mapping here shows a real
 *   value from row one underneath it, because a column header is a guess
 *   and a sample is evidence.
 *
 *   Discovering a required field is missing after the import runs. The
 *   summary bar is live and blocking: the button says how many required
 *   fields are still unmapped and stays disabled until none are.
 *
 *   Duplicate mapping. Two source columns pointed at `email` is not a
 *   validation error anyone expects, so it is caught here — picking a
 *   destination that is already taken releases it from the other row rather
 *   than refusing the choice, because refusing means the user has to
 *   remember which row to go and clear first.
 *
 * `skip` is a first-class destination, not an absence. A real export has
 * columns you do not want, and leaving them "unmapped" makes the unmapped
 * count meaningless — it can no longer distinguish "not dealt with yet"
 * from "deliberately ignored", which is the whole job of that counter.
 *
 * Accessibility: each select is labelled by its source column name, so a
 * screen reader hears "Full Name, mapping" rather than twelve identical
 * "select" announcements. The blocking summary is a `role="status"` so the
 * count is heard as it changes, not just seen.
 */

import * as React from 'react'
import { AlertTriangle, ArrowRight, Check, FileSpreadsheet, X } from 'lucide-react'

/** A column found in the uploaded file. */
export interface SourceColumn {
  /** The header as it appears in the file. */
  header: string
  /** Values from the first rows, shown as evidence under the mapping. */
  samples: string[]
}

/** A field in the destination schema. */
export interface TargetField {
  key: string
  label: string
  required?: boolean
  /** Shown when the field is selected — the format the importer expects. */
  hint?: string
}

export interface CsvImportMapperProps {
  fileName?: string
  rowCount?: number
  columns?: SourceColumn[]
  fields?: TargetField[]
  /** Pre-filled mapping, source header → target key. */
  initialMapping?: Record<string, string>
  onImport?: (mapping: Record<string, string>) => void
  className?: string
}

/** The destination that means "do not import this column". */
const SKIP = '__skip__'

const DEFAULT_COLUMNS: SourceColumn[] = [
  { header: 'Full Name', samples: ['Ada Lovelace', 'Grace Hopper'] },
  { header: 'Work Email', samples: ['ada@analytical.co', 'grace@navy.mil'] },
  { header: 'Company', samples: ['Analytical Engines', 'US Navy'] },
  { header: 'Phone', samples: ['+44 20 7946 0958', '+1 202 555 0114'] },
  { header: 'Signed Up', samples: ['2026-03-14', '2026-04-02'] },
  { header: 'Internal Notes', samples: ['do not contact', ''] },
]

const DEFAULT_FIELDS: TargetField[] = [
  { key: 'name', label: 'Name', required: true },
  { key: 'email', label: 'Email', required: true, hint: 'One address per row' },
  { key: 'company', label: 'Company' },
  { key: 'phone', label: 'Phone', hint: 'E.164 preferred; other formats are parsed' },
  { key: 'created_at', label: 'Created at', hint: 'ISO 8601 or YYYY-MM-DD' },
]

const DEFAULT_MAPPING: Record<string, string> = {
  'Full Name': 'name',
  'Work Email': 'email',
  Company: 'company',
  'Internal Notes': SKIP,
}

export function CsvImportMapper({
  fileName = 'customers-export.csv',
  rowCount = 1284,
  columns = DEFAULT_COLUMNS,
  fields = DEFAULT_FIELDS,
  initialMapping = DEFAULT_MAPPING,
  onImport,
  className = '',
}: CsvImportMapperProps) {
  /*
    Per-instance prefix for every id this block emits.

    The literals these replaced were a latent duplicate the moment the
    block appeared twice on one document, and `aria-labelledby` on a
    duplicated id resolves to the first match -- so the second copy was
    labelled by the first copy's heading. Client component, so `useId` is
    the right tool.
  */
  const uid = React.useId()

  const [mapping, setMapping] = React.useState<Record<string, string>>(initialMapping)

  /*
    Assigning a destination releases it from whichever column held it.

    The alternative — refusing the selection — is technically clearer and
    much worse to use: it makes the person remember which of twelve rows
    already claimed `email`, scroll to it, clear it, and come back. Moving
    it is what they meant.
  */
  function assign(header: string, target: string) {
    setMapping((current) => {
      const next: Record<string, string> = {}
      for (const [key, value] of Object.entries(current)) {
        if (value === target && target !== SKIP && key !== header) continue
        next[key] = value
      }
      next[header] = target
      return next
    })
  }

  const missingRequired = fields.filter(
    (field) => field.required && !Object.values(mapping).includes(field.key),
  )
  const mappedCount = Object.values(mapping).filter((v) => v && v !== SKIP).length
  const ready = missingRequired.length === 0

  return (
    <section
      aria-labelledby={`${uid}-csv-mapper-heading`}
      className={`mx-auto w-full max-w-4xl px-4 py-16 sm:px-6 lg:px-8 ${className}`}
    >
      <div className="overflow-hidden rounded-2xl border border-border bg-card">
        <header className="flex flex-wrap items-center gap-3 border-b border-border bg-muted/30 px-5 py-4">
          <FileSpreadsheet aria-hidden className="h-5 w-5 shrink-0 text-muted-foreground" />
          <div className="min-w-0 flex-1">
            <h2 id={`${uid}-csv-mapper-heading`} className="truncate text-sm font-semibold text-foreground">
              {fileName}
            </h2>
            <p className="text-xs text-muted-foreground">
              {rowCount.toLocaleString('en-US')} rows · {columns.length} columns found
            </p>
          </div>
          <span className="rounded-full bg-background px-3 py-1 text-xs font-medium text-muted-foreground ring-1 ring-inset ring-border">
            Step 2 of 3
          </span>
        </header>

        <div className="divide-y divide-border/60">
          {columns.map((column) => {
            const value = mapping[column.header] ?? ''
            const skipped = value === SKIP
            const field = fields.find((f) => f.key === value)
            const selectId = `csv-map-${column.header.replace(/\W+/g, '-').toLowerCase()}`

            return (
              <div
                key={column.header}
                className="grid grid-cols-1 items-start gap-3 px-5 py-4 sm:grid-cols-[1fr_auto_1fr] sm:gap-5"
              >
                <div className="min-w-0">
                  <p
                    className={`truncate text-sm font-medium ${
                      skipped ? 'text-muted-foreground line-through' : 'text-foreground'
                    }`}
                  >
                    {column.header}
                  </p>
                  {/* Evidence, not decoration — see the note at the top. An
                      empty first cell is shown as "empty" rather than as
                      nothing, because a blank sample and a missing sample
                      mean very different things about the file. */}
                  <p className="mt-1 truncate font-mono text-xs text-muted-foreground">
                    {column.samples[0]?.trim()
                      ? column.samples[0]
                      : <span className="italic">empty</span>}
                    {column.samples[1]?.trim() ? ` · ${column.samples[1]}` : ''}
                  </p>
                </div>

                <ArrowRight
                  aria-hidden
                  className="hidden h-4 w-4 shrink-0 self-center text-muted-foreground sm:block rtl:rotate-180"
                />

                <div className="min-w-0">
                  <label htmlFor={selectId} className="sr-only">
                    Destination field for {column.header}
                  </label>
                  <select
                    id={selectId}
                    value={value}
                    onChange={(event) => assign(column.header, event.target.value)}
                    className="h-9 w-full rounded-lg border border-field bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                  >
                    <option value="">Choose a field…</option>
                    {fields.map((f) => (
                      <option key={f.key} value={f.key}>
                        {f.label}
                        {f.required ? ' (required)' : ''}
                      </option>
                    ))}
                    <option value={SKIP}>Do not import</option>
                  </select>
                  {field?.hint ? (
                    <p className="mt-1 text-xs text-muted-foreground">{field.hint}</p>
                  ) : null}
                </div>
              </div>
            )
          })}
        </div>

        <footer className="flex flex-wrap items-center justify-between gap-4 border-t border-border bg-muted/30 px-5 py-4">
          {/* Live, because the count changes as they work and a blocked
              button with no audible reason is the classic dead end. */}
          <p role="status" className="flex items-center gap-2 text-sm">
            {ready ? (
              <>
                <Check aria-hidden className="h-4 w-4 text-foreground" />
                <span className="text-muted-foreground">
                  {mappedCount} column{mappedCount === 1 ? '' : 's'} mapped, everything
                  required is covered
                </span>
              </>
            ) : (
              <>
                <AlertTriangle aria-hidden className="h-4 w-4 text-destructive" />
                <span className="text-muted-foreground">
                  Still needed:{' '}
                  <span className="font-medium text-foreground">
                    {missingRequired.map((f) => f.label).join(', ')}
                  </span>
                </span>
              </>
            )}
          </p>

          <div className="flex items-center gap-2">
            <button
              type="button"
              className="inline-flex h-9 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground transition hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
            >
              <X aria-hidden className="h-4 w-4" />
              Cancel
            </button>
            <button
              type="button"
              disabled={!ready}
              onClick={() => onImport?.(mapping)}
              className="inline-flex h-9 items-center gap-1.5 rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50"
            >
              Import {rowCount.toLocaleString('en-US')} rows
            </button>
          </div>
        </footer>
      </div>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/csv-import-mapper.tsx and import it where you need the section:

import { CsvImportMapper } from '@/components/csv-import-mapper'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`fileName`	`string`	`'customers-export.csv'`
`rowCount`	`number`	`1284`
`columns`	`SourceColumn[]`	`DEFAULT_COLUMNS`
`fields`	`TargetField[]`	`DEFAULT_FIELDS`
`initialMapping`Pre-filled mapping, source header → target key.	`Record<string, string>`	`DEFAULT_MAPPING`
`onImport`	`(mapping: Record<string, string>) => void`	—
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

csv-import-mapper.html

<!--
  CSV Column Mapper — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<section aria-labelledby="_R_0_-csv-mapper-heading" class="mx-auto w-full max-w-4xl px-4 py-16 sm:px-6 lg:px-8 ">
  <div class="overflow-hidden rounded-2xl border border-border bg-card">
    <header class="flex flex-wrap items-center gap-3 border-b border-border bg-muted/30 px-5 py-4">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-spreadsheet h-5 w-5 shrink-0 text-muted-foreground" aria-hidden="true">
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
        <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
        <path d="M8 13h2"></path>
        <path d="M14 13h2"></path>
        <path d="M8 17h2"></path>
        <path d="M14 17h2"></path>
      </svg>
      <div class="min-w-0 flex-1">
        <h2 id="_R_0_-csv-mapper-heading" class="truncate text-sm font-semibold text-foreground">customers-export.csv</h2>
        <p class="text-xs text-muted-foreground">1,284 rows · 6 columns found</p>
      </div>
      <span class="rounded-full bg-background px-3 py-1 text-xs font-medium text-muted-foreground ring-1 ring-inset ring-border">Step 2 of 3</span>
    </header>
    <div class="divide-y divide-border/60">
      <div class="grid grid-cols-1 items-start gap-3 px-5 py-4 sm:grid-cols-[1fr_auto_1fr] sm:gap-5">
        <div class="min-w-0">
          <p class="truncate text-sm font-medium text-foreground">Full Name</p>
          <p class="mt-1 truncate font-mono text-xs text-muted-foreground">Ada Lovelace · Grace Hopper</p>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right hidden h-4 w-4 shrink-0 self-center text-muted-foreground sm:block rtl:rotate-180" aria-hidden="true">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
        <div class="min-w-0">
          <label for="csv-map-full-name" class="sr-only">Destination field for Full Name</label>
          <select id="csv-map-full-name" class="h-9 w-full rounded-lg border border-field bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
            <option value="">Choose a field…</option>
            <option value="name" selected="">Name (required)</option>
            <option value="email">Email (required)</option>
            <option value="company">Company</option>
            <option value="phone">Phone</option>
            <option value="created_at">Created at</option>
            <option value="__skip__">Do not import</option>
          </select>
        </div>
      </div>
      <div class="grid grid-cols-1 items-start gap-3 px-5 py-4 sm:grid-cols-[1fr_auto_1fr] sm:gap-5">
        <div class="min-w-0">
          <p class="truncate text-sm font-medium text-foreground">Work Email</p>
          <p class="mt-1 truncate font-mono text-xs text-muted-foreground">ada@analytical.co · grace@navy.mil</p>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right hidden h-4 w-4 shrink-0 self-center text-muted-foreground sm:block rtl:rotate-180" aria-hidden="true">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
        <div class="min-w-0">
          <label for="csv-map-work-email" class="sr-only">Destination field for Work Email</label>
          <select id="csv-map-work-email" class="h-9 w-full rounded-lg border border-field bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
            <option value="">Choose a field…</option>
            <option value="name">Name (required)</option>
            <option value="email" selected="">Email (required)</option>
            <option value="company">Company</option>
            <option value="phone">Phone</option>
            <option value="created_at">Created at</option>
            <option value="__skip__">Do not import</option>
          </select>
          <p class="mt-1 text-xs text-muted-foreground">One address per row</p>
        </div>
      </div>
      <div class="grid grid-cols-1 items-start gap-3 px-5 py-4 sm:grid-cols-[1fr_auto_1fr] sm:gap-5">
        <div class="min-w-0">
          <p class="truncate text-sm font-medium text-foreground">Company</p>
          <p class="mt-1 truncate font-mono text-xs text-muted-foreground">Analytical Engines · US Navy</p>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right hidden h-4 w-4 shrink-0 self-center text-muted-foreground sm:block rtl:rotate-180" aria-hidden="true">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
        <div class="min-w-0">
          <label for="csv-map-company" class="sr-only">Destination field for Company</label>
          <select id="csv-map-company" class="h-9 w-full rounded-lg border border-field bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
            <option value="">Choose a field…</option>
            <option value="name">Name (required)</option>
            <option value="email">Email (required)</option>
            <option value="company" selected="">Company</option>
            <option value="phone">Phone</option>
            <option value="created_at">Created at</option>
            <option value="__skip__">Do not import</option>
          </select>
        </div>
      </div>
      <div class="grid grid-cols-1 items-start gap-3 px-5 py-4 sm:grid-cols-[1fr_auto_1fr] sm:gap-5">
        <div class="min-w-0">
          <p class="truncate text-sm font-medium text-foreground">Phone</p>
          <p class="mt-1 truncate font-mono text-xs text-muted-foreground">+44 20 7946 0958 · +1 202 555 0114</p>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right hidden h-4 w-4 shrink-0 self-center text-muted-foreground sm:block rtl:rotate-180" aria-hidden="true">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
        <div class="min-w-0">
          <label for="csv-map-phone" class="sr-only">Destination field for Phone</label>
          <select id="csv-map-phone" class="h-9 w-full rounded-lg border border-field bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
            <option value="" selected="">Choose a field…</option>
            <option value="name">Name (required)</option>
            <option value="email">Email (required)</option>
            <option value="company">Company</option>
            <option value="phone">Phone</option>
            <option value="created_at">Created at</option>
            <option value="__skip__">Do not import</option>
          </select>
        </div>
      </div>
      <div class="grid grid-cols-1 items-start gap-3 px-5 py-4 sm:grid-cols-[1fr_auto_1fr] sm:gap-5">
        <div class="min-w-0">
          <p class="truncate text-sm font-medium text-foreground">Signed Up</p>
          <p class="mt-1 truncate font-mono text-xs text-muted-foreground">2026-03-14 · 2026-04-02</p>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right hidden h-4 w-4 shrink-0 self-center text-muted-foreground sm:block rtl:rotate-180" aria-hidden="true">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
        <div class="min-w-0">
          <label for="csv-map-signed-up" class="sr-only">Destination field for Signed Up</label>
          <select id="csv-map-signed-up" class="h-9 w-full rounded-lg border border-field bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
            <option value="" selected="">Choose a field…</option>
            <option value="name">Name (required)</option>
            <option value="email">Email (required)</option>
            <option value="company">Company</option>
            <option value="phone">Phone</option>
            <option value="created_at">Created at</option>
            <option value="__skip__">Do not import</option>
          </select>
        </div>
      </div>
      <div class="grid grid-cols-1 items-start gap-3 px-5 py-4 sm:grid-cols-[1fr_auto_1fr] sm:gap-5">
        <div class="min-w-0">
          <p class="truncate text-sm font-medium text-muted-foreground line-through">Internal Notes</p>
          <p class="mt-1 truncate font-mono text-xs text-muted-foreground">do not contact</p>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right hidden h-4 w-4 shrink-0 self-center text-muted-foreground sm:block rtl:rotate-180" aria-hidden="true">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
        <div class="min-w-0">
          <label for="csv-map-internal-notes" class="sr-only">Destination field for Internal Notes</label>
          <select id="csv-map-internal-notes" class="h-9 w-full rounded-lg border border-field bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
            <option value="">Choose a field…</option>
            <option value="name">Name (required)</option>
            <option value="email">Email (required)</option>
            <option value="company">Company</option>
            <option value="phone">Phone</option>
            <option value="created_at">Created at</option>
            <option value="__skip__" selected="">Do not import</option>
          </select>
        </div>
      </div>
    </div>
    <footer class="flex flex-wrap items-center justify-between gap-4 border-t border-border bg-muted/30 px-5 py-4">
      <p role="status" class="flex items-center gap-2 text-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check h-4 w-4 text-foreground" aria-hidden="true">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span class="text-muted-foreground">3 columns mapped, everything required is covered</span>
      </p>
      <div class="flex items-center gap-2">
        <button type="button" class="inline-flex h-9 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground transition hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>Cancel</button>
        <button type="button" class="inline-flex h-9 items-center gap-1.5 rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50">Import 1,284 rows</button>
      </div>
    </footer>
  </div>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Import Data7 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

6 more blocks in File Upload

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse File Upload

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More File Upload blocks

View category

Drag & Drop Upload

Dropzone with per-file progress and a drag counter that fixes the flicker every naive dragleave handler produces.

File Upload219 lines1 dep

Upload Progress List

The list that follows the dropzone: complete, uploading, queued and failed rows with cancel and retry — because hiding the failure is the classic upload bug.

File Upload171 lines1 dep

Resumable Large Upload

One big file on a connection that will drop: a bar allowed to go backwards when a chunk is retried, a time estimate that is a range or nothing, and a promise about closing the tab made before it is needed.

File Upload237 lines1 dep2 Sept

Avatar Crop & Upload

Framing a profile photo with keyboard-operable zoom and position, showing what gets trimmed rather than hiding it behind the mask.

File Upload268 lines1 dep2 Sept

Send us the file

The limits are here rather than in the error you would otherwise meet after uploading. Rejecting a 400 MB file after transferring it is a failure of the form, not of the person.

Upload Requirements Form

An upload form that states the constraints before the file is chosen, rather than rejecting it after a two-minute transfer.

File Upload184 linesNo deps

Import From URL Form

The import path for a file that is already on the internet, which does not need to travel through the browser at all.

File Upload178 linesNo deps