---
title: "Porter — Import Data"
platform: web
slug: porter-import-data-web
screens: ["file-upload"]
domains: ["developer-tools"]
style: "minimal"
fonts: ["Inter", "IBM Plex Mono"]
roles: ["top-navigation-bar", "button", "avatar", "sidebar", "navigation-menu", "divider", "badge", "file-uploader", "card", "select", "segmented-control"]
score: {clean: 100, consistent: 86, accessible: 91, comprehensible: 72}
url: https://gui.farm/web/porter-import-data-web
raw: https://gui.farm/web/porter-import-data-web/design.guix
download: https://gui.farm/web/porter-import-data-web.gui
---

# Porter — Import Data

Data import screen for an ETL/warehouse tool — source file upload queue, format compatibility, and dataset setup.

- **Live preview:** https://gui.farm/web/porter-import-data-web
- **Raw source:** https://gui.farm/web/porter-import-data-web/design.guix
- **Download (.gui):** https://gui.farm/web/porter-import-data-web.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Porter — Import Data">
  <tokens>
    <color name="bg" value="#0B0D10" />
    <color name="surface" value="#12161C" />
    <color name="surface-raised" value="#181D25" />
    <color name="surface-soft" value="#202631" />
    <color name="ink" value="#F4F6F8" />
    <color name="muted" value="#A9B2BF" />
    <color name="line" value="#303846" />
    <color name="primary" value="#A78BFA" />
    <color name="primary-soft" value="#2B2142" />
    <color name="success" value="#55D6A9" />
    <color name="success-soft" value="#15352C" />
    <color name="warning" value="#F7C96B" />
    <color name="warning-soft" value="#3A2D14" />
    <number name="r-sm" value="8" />
    <number name="r-md" value="12" />
    <number name="r-lg" value="18" />
    <number name="r-full" value="999" />
  </tokens>
  <styles>
    <text-style name="Display" font-family="Inter" font-size="30" font-weight="700" line-height="38" />
    <text-style name="H2" font-family="Inter" font-size="20" font-weight="650" line-height="28" />
    <text-style name="H3" font-family="Inter" font-size="16" font-weight="650" line-height="24" />
    <text-style name="Body" font-family="Inter" font-size="14" font-weight="400" line-height="21" />
    <text-style name="BodyStrong" font-family="Inter" font-size="14" font-weight="600" line-height="21" />
    <text-style name="Label" font-family="Inter" font-size="12" font-weight="600" line-height="16" />
    <text-style name="Caption" font-family="Inter" font-size="11" font-weight="500" line-height="16" />
    <text-style name="Mono" font-family="IBM Plex Mono" font-size="12" font-weight="500" line-height="17" />
  </styles>
  <fonts>
    <font family="Inter" source="google" weights="400 500 600 650 700" styles="normal" />
    <font family="IBM Plex Mono" source="google" weights="500" styles="normal" />
  </fonts>
  <col w="1440" fill="$bg" clip="true">
    <row
      role="top-navigation-bar"
      w="1440"
      h="64"
      fill="$surface"
      border="1 $line"
      p="0 24"
      gap="auto"
      align="middle-left"
    >
      <row w="220" gap="10" align="middle-left">
        <row w="34" h="34" radius="$r-sm" fill="$primary" align="middle-center">
          <img src="https://api.iconify.design/lucide/waypoints.svg?color=%230B0D10" w="18" h="18" />
        </row>
        <text text-style="H3" value="Porter" fill="$ink" />
      </row>
      <row gap="10" align="middle-right">
        <row role="button" w="38" h="38" radius="$r-full" align="middle-center">
          <img src="https://api.iconify.design/lucide/bell.svg?color=%23A9B2BF" w="18" h="18" />
        </row>
        <row role="button" w="38" h="38" radius="$r-full" align="middle-center">
          <img src="https://api.iconify.design/lucide/circle-help.svg?color=%23A9B2BF" w="18" h="18" />
        </row>
        <row role="avatar" w="34" h="34" radius="$r-full" fill="$primary-soft" align="middle-center">
          <text text-style="Label" value="AM" fill="$primary" />
        </row>
      </row>
    </row>
    <row w="1440" p="24" gap="20" align="top-left">
      <col role="sidebar" w="232" fill="$surface" border="1 $line" radius="$r-lg" p="12" gap="18">
        <col role="navigation-menu" w="206" gap="4">
          <row w="206" h="40" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://api.iconify.design/lucide/layout-dashboard.svg?color=%23A9B2BF" w="17" h="17" />
            <text text-style="BodyStrong" value="Overview" fill="$muted" />
          </row>
          <row w="206" h="40" radius="$r-sm" fill="$primary-soft" p="0 12" gap="10" align="middle-left">
            <img src="https://api.iconify.design/lucide/database-zap.svg?color=%23A78BFA" w="17" h="17" />
            <text text-style="BodyStrong" value="Imports" fill="$primary" />
          </row>
          <row w="206" h="40" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://api.iconify.design/lucide/table-2.svg?color=%23A9B2BF" w="17" h="17" />
            <text text-style="BodyStrong" value="Datasets" fill="$muted" />
          </row>
          <row w="206" h="40" radius="$r-sm" p="0 12" gap="10" align="middle-left">
            <img src="https://api.iconify.design/lucide/workflow.svg?color=%23A9B2BF" w="17" h="17" />
            <text text-style="BodyStrong" value="Pipelines" fill="$muted" />
          </row>
        </col>
        <line role="divider" w="206" fill="$line" />
        <col w="206" gap="8" p="0 4">
          <text text-style="Label" value="WORKSPACE" fill="$muted" />
          <row gap="8" align="middle-left">
            <row w="28" h="28" radius="$r-sm" fill="$surface-soft" align="middle-center">
              <img src="https://api.iconify.design/lucide/box.svg?color=%23F4F6F8" w="15" h="15" />
            </row>
            <col gap="0">
              <text text-style="BodyStrong" value="Northstar" fill="$ink" />
              <text text-style="Caption" value="Production" fill="$muted" />
            </col>
          </row>
        </col>
        <col w="206" fill="$surface-raised" radius="$r-md" p="12" gap="8">
          <row gap="8" align="middle-left">
            <img src="https://api.iconify.design/lucide/hard-drive.svg?color=%23A9B2BF" w="16" h="16" />
            <text text-style="Label" value="STORAGE" fill="$muted" />
          </row>
          <text text-style="BodyStrong" value="6.2 GB of 10 GB" fill="$ink" />
          <frame w="182" h="6" radius="$r-full" fill="$surface-soft" clip="true">
            <rect x="0" y="0" w="112.84" h="6" radius="$r-full" fill="$primary" />
          </frame>
          <text text-style="Caption" value="62% used" fill="$muted" />
        </col>
      </col>
      <col w="1140" gap="18">
        <row w="1140" gap="auto" align="middle-left">
          <col gap="4">
            <row gap="8" align="middle-left">
              <text text-style="Caption" value="IMPORTS" fill="$muted" />
              <img src="https://api.iconify.design/lucide/chevron-right.svg?color=%23A9B2BF" w="13" h="13" />
              <text text-style="Caption" value="NEW IMPORT" fill="$primary" />
            </row>
            <text text-style="Display" value="Import data" fill="$ink" />
            <text
              text-style="Body"
              value="Add source files, review compatibility, then start a new dataset import."
              fill="$muted"
            />
          </col>
          <row
            role="badge"
            h="30"
            radius="$r-full"
            fill="$surface-raised"
            border="1 $line"
            p="0 12"
            gap="7"
            align="middle-center"
          >
            <ellipse w="7" h="7" fill="$success" />
            <text text-style="Label" value="IMPORT SERVICE ONLINE" fill="$muted" />
          </row>
        </row>
        <row w="1140" gap="18" align="top-left">
          <col w="754" gap="14">
            <col role="file-uploader" w="754" fill="$surface" border="1 $line" radius="$r-lg" p="20" gap="18">
              <row w="712" gap="auto" align="middle-left">
                <col gap="3">
                  <text text-style="H2" value="Source files" fill="$ink" />
                  <text
                    text-style="Body"
                    value="CSV, JSON, Parquet or NDJSON · up to 2 GB per file"
                    fill="$muted"
                  />
                </col>
                <row role="badge" h="28" radius="$r-full" fill="$primary-soft" p="0 10" align="middle-center">
                  <text text-style="Label" value="3 FILES · 174.4 MB" fill="$primary" />
                </row>
              </row>
              <col
                w="712"
                h="hug"
                fill="$surface-raised"
                border="1 $line"
                radius="$r-md"
                align="middle-center"
                gap="8"
                p="32 16"
              >
                <row w="44" h="44" radius="$r-md" fill="$primary-soft" align="middle-center">
                  <img src="https://api.iconify.design/lucide/cloud-upload.svg?color=%23A78BFA" w="22" h="22" />
                </row>
                <text text-style="H3" value="Drop files here to add more" fill="$ink" />
                <text text-style="Body" value="or choose a source from your computer" fill="$muted" />
                <row role="button" h="38" radius="$r-sm" fill="$primary" p="0 14" gap="7" align="middle-center">
                  <img src="https://api.iconify.design/lucide/folder-open.svg?color=%230B0D10" w="16" h="16" />
                  <text text-style="BodyStrong" value="Choose files" fill="$bg" />
                </row>
              </col>
              <col w="712" gap="10">
                <row w="712" gap="auto" align="middle-center">
                  <text text-style="Label" value="UPLOAD QUEUE" fill="$muted" />
                  <text text-style="Caption" value="1 ready · 1 uploading · 1 queued" fill="$muted" />
                </row>
                <col w="712" fill="$surface-raised" radius="$r-md" clip="true">
                  <row w="712" p="14" gap="12" align="middle-left">
                    <row w="38" h="38" radius="$r-sm" fill="$success-soft" align="middle-center">
                      <img
                        src="https://api.iconify.design/lucide/file-spreadsheet.svg?color=%2355D6A9"
                        w="19"
                        h="19"
                      />
                    </row>
                    <col w="430" gap="2">
                      <text text-style="BodyStrong" value="transactions_2026.csv" fill="$ink" />
                      <text text-style="Caption" value="48.0 MB · UTF-8 · 384,221 rows" fill="$muted" />
                    </col>
                    <row w="90" gap="6" align="middle-left">
                      <img
                        src="https://api.iconify.design/lucide/circle-check.svg?color=%2355D6A9"
                        w="16"
                        h="16"
                      />
                      <text text-style="Label" value="READY" fill="$success" />
                    </row>
                    <row role="button" w="34" h="34" radius="$r-sm" align="middle-center">
                      <img src="https://api.iconify.design/lucide/x.svg?color=%23A9B2BF" w="16" h="16" />
                    </row>
                  </row>
                  <line w="712" fill="$line" />
                  <row w="712" p="14" gap="12" align="middle-left">
                    <row w="38" h="38" radius="$r-sm" fill="$primary-soft" align="middle-center">
                      <img src="https://api.iconify.design/lucide/file-box.svg?color=%23A78BFA" w="19" h="19" />
                    </row>
                    <col w="430" gap="7">
                      <row gap="8" align="middle-left">
                        <text text-style="BodyStrong" value="accounts.parquet" fill="$ink" />
                        <text text-style="Caption" value="126.4 MB" fill="$muted" />
                      </row>
                      <frame w="420" h="6" radius="$r-full" fill="$surface-soft" clip="true">
                        <rect x="0" y="0" w="285.6" h="6" radius="$r-full" fill="$primary" />
                      </frame>
                    </col>
                    <row w="90" gap="6" align="middle-left">
                      <img
                        src="https://api.iconify.design/lucide/loader-circle.svg?color=%23A78BFA"
                        w="16"
                        h="16"
                      />
                      <text text-style="Label" value="68%" fill="$primary" />
                    </row>
                    <row role="button" w="34" h="34" radius="$r-sm" align="middle-center">
                      <img src="https://api.iconify.design/lucide/x.svg?color=%23A9B2BF" w="16" h="16" />
                    </row>
                  </row>
                  <line w="712" fill="$line" />
                  <row w="712" p="14" gap="12" align="middle-left">
                    <row w="38" h="38" radius="$r-sm" fill="$surface-soft" align="middle-center">
                      <img
                        src="https://api.iconify.design/lucide/file-json.svg?color=%23A9B2BF"
                        w="19"
                        h="19"
                      />
                    </row>
                    <col w="430" gap="2">
                      <text text-style="BodyStrong" value="schema.json" fill="$ink" />
                      <text text-style="Caption" value="12.6 KB · JSON Schema" fill="$muted" />
                    </col>
                    <row w="90" gap="6" align="middle-left">
                      <img src="https://api.iconify.design/lucide/clock-3.svg?color=%23F7C96B" w="16" h="16" />
                      <text text-style="Label" value="QUEUED" fill="$warning" />
                    </row>
                    <row role="button" w="34" h="34" radius="$r-sm" align="middle-center">
                      <img src="https://api.iconify.design/lucide/x.svg?color=%23A9B2BF" w="16" h="16" />
                    </row>
                  </row>
                </col>
              </col>
            </col>
          </col>
          <col w="368" gap="14">
            <col role="card" w="368" fill="$surface" border="1 $line" radius="$r-lg" p="18" gap="14">
              <text text-style="H3" value="Import settings" fill="$ink" />
              <col gap="7">
                <text text-style="Label" value="DATASET NAME" fill="$muted" />
                <row
                  w="330"
                  h="42"
                  fill="$surface-raised"
                  border="1 $line"
                  radius="$r-sm"
                  p="0 12"
                  align="middle-left"
                >
                  <text text-style="Body" value="Customer ledger — August" fill="$ink" />
                </row>
              </col>
              <col gap="7">
                <text text-style="Label" value="DESTINATION" fill="$muted" />
                <row
                  role="select"
                  w="330"
                  h="42"
                  fill="$surface-raised"
                  border="1 $line"
                  radius="$r-sm"
                  p="0 12"
                  gap="auto"
                  align="middle-left"
                >
                  <row gap="8" align="middle-left">
                    <img src="https://api.iconify.design/lucide/database.svg?color=%23A9B2BF" w="16" h="16" />
                    <text text-style="Body" value="warehouse / finance" fill="$ink" />
                  </row>
                  <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23A9B2BF" w="16" h="16" />
                </row>
              </col>
              <col gap="7">
                <text text-style="Label" value="ON CONFLICT" fill="$muted" />
                <row
                  role="segmented-control"
                  w="330"
                  h="40"
                  fill="$surface-raised"
                  border="1 $line"
                  radius="$r-sm"
                  clip="true"
                >
                  <row w="165" h="40" fill="$primary-soft" align="middle-center">
                    <text text-style="BodyStrong" value="Update rows" fill="$primary" />
                  </row>
                  <row w="165" h="40" align="middle-center">
                    <text text-style="BodyStrong" value="Skip rows" fill="$muted" />
                  </row>
                </row>
              </col>
            </col>
            <col role="card" w="368" fill="$surface" border="1 $line" radius="$r-lg" p="18" gap="12">
              <row gap="8" align="middle-left">
                <row w="30" h="30" radius="$r-full" fill="$success-soft" align="middle-center">
                  <img src="https://api.iconify.design/lucide/shield-check.svg?color=%2355D6A9" w="16" h="16" />
                </row>
                <text text-style="H3" value="Preflight checks" fill="$ink" />
              </row>
              <row w="330" gap="auto" align="middle-center">
                <text text-style="Body" value="File type support" fill="$muted" />
                <text text-style="Label" value="PASSED" fill="$success" />
              </row>
              <row w="330" gap="auto" align="middle-center">
                <text text-style="Body" value="Header consistency" fill="$muted" />
                <text text-style="Label" value="PASSED" fill="$success" />
              </row>
              <row w="330" gap="auto" align="middle-center">
                <text text-style="Body" value="Schema validation" fill="$muted" />
                <text text-style="Label" value="WAITING" fill="$warning" />
              </row>
              <line w="330" fill="$line" />
              <text
                text-style="Caption"
                value="Checks finish automatically when every upload is complete."
                fill="$muted"
              />
            </col>
          </col>
        </row>
      </col>
    </row>
    <!-- viewport-fixed action bar; kept as the final flow child -->
    <row w="1440" h="72" fill="$surface" border="1 $line" p="0 24" gap="auto" align="middle-center">
      <row gap="10" align="middle-left">
        <row w="30" h="30" radius="$r-full" fill="$primary-soft" align="middle-center">
          <img src="https://api.iconify.design/lucide/upload-cloud.svg?color=%23A78BFA" w="16" h="16" />
        </row>
        <col gap="1">
          <text text-style="BodyStrong" value="Upload in progress" fill="$ink" />
          <text
            text-style="Caption"
            value="Import becomes available when all 3 files are ready."
            fill="$muted"
          />
        </col>
      </row>
      <row gap="10" align="middle-center">
        <row role="button" h="42" radius="$r-sm" border="1 $line" p="0 16" align="middle-center">
          <text text-style="BodyStrong" value="Cancel" fill="$ink" />
        </row>
        <row role="button" h="42" radius="$r-sm" fill="$surface-soft" p="0 18" gap="8" align="middle-center">
          <text text-style="BodyStrong" value="Start import" fill="$muted" />
          <img src="https://api.iconify.design/lucide/arrow-right.svg?color=%23A9B2BF" w="16" h="16" />
        </row>
      </row>
    </row>
  </col>
</gui>
```