Import Data Step
Onboarding import step with CSV dropzone, tool and API source tiles, a dry-run preview promise, and a skip link.
Onboarding import step with CSV dropzone, tool and API source tiles, a dry-run preview promise, and a skip link.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Import Data Step is the bring-your-data screen of an onboarding flow, three source tiles (Import from CSV, Import from another tool, Use the API) with the CSV tile expanded to show a dashed dropzone accepting .csv and .tsv up to 50 MB. The dry-run promise sits in a quiet muted callout below it: Acme maps your columns and shows you a preview of exactly what will be imported. Nothing is written until you confirm.
Sources are one array with an expanded flag driving the chevron rotation and dropzone reveal. The dry-run note is the honest anchor that lowers import anxiety before the user even uploads a file.
Reach for this block on the data-import step of an onboarding wizard, wired to your file-upload endpoint and column-mapping preview route. The skip link at the foot, Start empty, import any time from Settings, handles users who want to explore first.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the CSV import path in a new-user flow. Other import steps:
Tip: the dry-run callout is what earns the click on Upload file; skip it and users will hesitate.