@spotable/spreadsheet-import-ui-shadcn

A ready-made import flow for shadcn/ui projects, built on @spotable/spreadsheet-import-react. Radix primitives, rendered against the CSS variables you already define — so it inherits your theme, your dark mode and your Button.

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

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

<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.

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-shadcn/dist";

Or copy it

Ships as a shadcn registry too, so you can vendor the components into your own tree and edit them:

npx shadcn@latest add https://raw.githubusercontent.com/Databoy9000/spreadsheet-import/main/packages/ui-shadcn/registry/spreadsheet-import.json

Not privileged — it is a couple of hundred lines of markup over the hooks. See the root README for props, fields and validation.

MIT