About this block

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.

When to use

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

• Onboarding step

After

• Connect tools step
• Finish setup card

What you can display

One strong use is the CSV import path in a new-user flow. Other import steps:

• Migration tool. The tool tile expanded with an OAuth connect button instead of a dropzone.
• API path. The API tile expanded with a code snippet and a link to the docs.
• Re-import panel. The same block reused in Settings for subsequent imports after onboarding.

Tip: the dry-run callout is what earns the click on Upload file; skip it and users will hesitate.