@spotable/spreadsheet-import-ui-react

A ready-made import flow with its own styling, built on @spotable/spreadsheet-import-react. Plain Tailwind, no Radix — it ships its own colours and needs nothing but Tailwind in your project.

npm i @spotable/spreadsheet-import-core @spotable/spreadsheet-import-react @spotable/spreadsheet-import-ui-react

import { createCsvParser } from "@spotable/spreadsheet-import-core/parsers"
import { SpreadsheetImport } from "@spotable/spreadsheet-import-ui-react"

<SpreadsheetImport
  fields={fields}
  parser={createCsvParser()}
  onSubmit={(result) => save(result.validData)}
/>

Upload → pick the sheet → point at the header row → map columns onto your fields → fix what is wrong → submit.

If your app already uses shadcn/ui, take @spotable/spreadsheet-import-ui-shadcn instead — it renders against your existing theme tokens.

Tailwind v4

Tailwind does not scan node_modules, so you must point it at this package or you get correct markup with no styling at all:

@source "../node_modules/@spotable/spreadsheet-import-ui-react/dist";

The src folder ships in the package too, so you can copy any component out and change it. See the root README for props, fields and validation.

MIT