caliper uidocs
DemoSign inGet Pro

Csv import

Pro

Brings a spreadsheet in without surprises: upload or paste, match columns (guessed from the names), fix problem rows in place, import with real progress you can stop, and download what was skipped.

Installs components/ui/csv-import.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/csv-import

Import contacts

Columns we look for:Name *Email *CompanyPlanSeatsCustomer since
Paste data instead

No file to hand?

When to use #

Use it for

  • Importing contacts, products, transactions or users.
  • Moving customers off a spreadsheet or another tool.

Skip it when

  • A live sync with another system; build an integration.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/csv-import

Adds its 14 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from CsvImport, parseCsv and toCsv.

example.tsx
import { CsvImport, parseCsv, toCsv } from "@/components/ui/csv-import"

The worked example comes with Pro

The 44-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

CsvImport

component
PropTypeDefaultDescription
entitystring"rows"What the rows are, plural, e.g. "contacts".
fields *readonly ImportField[]—
sample{ name: string; text: string; }—Offer a ready-made file, e.g. for a first try.
maxRowsnumber10_000
onImport *(rows: ImportRow[], progress: (done: number) => void, signal: AbortSignal) => Promise<void>—Imports the checked rows. Call `progress` with how many are done so the bar shows real work; stop when `signal` aborts. A thrown error is shown with a retry.
classNamestring—

parseCsv

component

No props of its own; it accepts the native props of its root element.

toCsv

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It exposes status, alert and region semantics, with aria-labelledby, aria-hidden, aria-label and aria-live kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
EnterActivates the focused control.
EscapeCloses or cancels, then returns focus to where it came from.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.