Import Wizard

Guided data import.

1 Upload 2 Map fields 3 Confirm
Selected file: contacts.csv
Map columns from contacts.csv to fields (240 rows)
Ready to import 240 rows from contacts.csv

html

<div class="wiz wiz--upload">
  <div class="wiz__steps">
    <span class="wiz__step wiz__step--upload" style="--a:#BFD9F2;">1 Upload</span>
    <span class="wiz__step wiz__step--map" style="--a:#BFD9F2;">2 Map fields</span>
    <span class="wiz__step wiz__step--confirm" style="--a:#BFD9F2;">3 Confirm</span>
  </div>
  <div class="wiz__panel wiz__panel--upload">Selected file: <strong>contacts.csv</strong></div>
  <div class="wiz__panel wiz__panel--map">Map columns from contacts.csv to fields (240 rows)</div>
  <div class="wiz__panel wiz__panel--confirm">Ready to import 240 rows from contacts.csv</div>
</div>
<style>
.wiz { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.wiz__steps { display: flex; gap: 6px; margin-bottom: 14px; }
.wiz__step { flex: 1; text-align: center; padding: 7px 4px; border-radius: 6px; background: #24143010; font-size: 10px; font-weight: 600; }
.wiz__panel { display: none; padding: 14px; border-radius: 8px; background: #ffffff; border: 1.5px solid #24143018; text-align: center; }
.wiz--upload .wiz__step--upload, .wiz--map .wiz__step--map, .wiz--confirm .wiz__step--confirm { background: var(--a); }
.wiz--upload .wiz__panel--upload, .wiz--map .wiz__panel--map, .wiz--confirm .wiz__panel--confirm { display: block; }
</style>

tailwind

<div class="wiztw wiztw--upload font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border">
  <div class="flex gap-1.5 mb-3.5">
    <span class="wiztw__step wiztw__step--upload flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[10px] font-semibold" style="--a:#BFD9F2;">1 Upload</span>
    <span class="wiztw__step wiztw__step--map flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[10px] font-semibold" style="--a:#BFD9F2;">2 Map fields</span>
    <span class="wiztw__step wiztw__step--confirm flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[10px] font-semibold" style="--a:#BFD9F2;">3 Confirm</span>
  </div>
  <div class="wiztw__panel wiztw__panel--upload hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-center">Selected file: <strong>contacts.csv</strong></div>
  <div class="wiztw__panel wiztw__panel--map hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-center">Map columns from contacts.csv to fields (240 rows)</div>
  <div class="wiztw__panel wiztw__panel--confirm hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-center">Ready to import 240 rows from contacts.csv</div>
</div>
<style>
.wiztw--upload .wiztw__step--upload, .wiztw--map .wiztw__step--map, .wiztw--confirm .wiztw__step--confirm { background: var(--a); }
.wiztw--upload .wiztw__panel--upload, .wiztw--map .wiztw__panel--map, .wiztw--confirm .wiztw__panel--confirm { display: block; }
</style>

react

export function ImportWizard({
  step = "upload",
  fileName = "contacts.csv",
  rowCount = 240,
  accent = "#BFD9F2",
}) {
  const steps = [["upload", "1 Upload"], ["map", "2 Map fields"], ["confirm", "3 Confirm"]];
  const panels = {
    upload: <>Selected file: <strong>{fileName}</strong></>,
    map: <>Map columns from {fileName} to fields ({rowCount} rows)</>,
    confirm: <>Ready to import {rowCount} rows from {fileName}</>,
  };
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
        {steps.map(([id, label]) => (
          <span key={id} style={{ flex: 1, textAlign: "center", padding: "7px 4px", borderRadius: 6, fontSize: 10, fontWeight: 600, background: id === step ? accent : "#24143010" }}>{label}</span>
        ))}
      </div>
      <div style={{ padding: 14, borderRadius: 8, background: "#ffffff", border: "1.5px solid #24143018", textAlign: "center" }}>{panels[step]}</div>
    </div>
  );
}