Import Page
A CSV import wizard with upload, column mapping with auto-matched fields and type warnings, a preview highlighting row errors, then import progress and a summary.
Preview
Import contacts
contacts-q3.csv· 8 rows- Upload, completed
- Map columns, current
- Preview, not started
- Import, not started
We matched 5 of 6 columns. Check the rest, or skip the ones you don’t need.
| Column in file | Sample | Maps to | Check |
|---|---|---|---|
| Full name | Mira Kovač, Theo Osei | Auto | 1 value off |
| mira@pebble.example, theo@pebble.example | Auto | 1 value off | |
| Organisation | Pebble, Pebble | Auto | text |
| Signup date | 2026-03-04, 2026-04-18 | Auto | 1 value off |
| Seats | 12, 4 | Auto | 1 value off |
| Notes | Champion | Skipped |
Import contacts
contacts-q3.csv· 8 rows- Upload, completed
- Map columns, completed
- Preview, current
- Import, not started
4 ready · 4 with errors
| Row | Name | Company | Joined | Seats | |
|---|---|---|---|---|---|
| 2 | Mira Kovač | mira@pebble.example | Pebble | 2026-03-04 | 12 |
| 3 | Theo Osei | theo@pebble.example | Pebble | 2026-04-18 | 4 |
| 4 | Ana Sousa | ana.sousa@pebble, error: Not an email | Pebble | 2026-05-02 | 8 |
| 5 | Jun Park | jun@pebble.example | Pebble Press | next week, error: Not a date | 3 |
| 6 | Leo Varga | leo@pebble.example | Pebble | 2026-06-11 | 1 |
| 7 | Ruth Amsel | ruth@pebble.example | Pebble | 2026-07-09 | ten, error: Not a number |
| 8 | empty, error: Required | kenji@pebble.example | Pebble | 2026-08-21 | 2 |
| 9 | Sara Okafor | sara@pebble.example | Pebble | 2026-09-30 | 6 |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | ImportField[] | — | Fields columns map onto: { key, label, type?, required?, aliases? }. |
| noun | string | "rows" | What is imported, plural, e.g. contacts. |
| sampleCsv | string | — | CSV used by Try the sample file. |
| defaultCsv | string | — | Start with a file loaded (e.g. for previews). |
| defaultFileName | string | "import.csv" | Name shown for defaultCsv. |
| defaultStep | "upload" | "map" | "preview" | "import" | upload / map | Step shown first. |
| onImport | (rows) => void | Promise<void> | — | Receives the rows to store, keyed by field. |
| title | ReactNode | "Import" | Page heading. |
| height | number | 600 | Frame height in px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.