Empty state — Import area with format guidance

An empty collection presents a large file-selection area alongside import requirements. Use when importing a file is the quickest path to initial content.

ReactHTML

1440 × 900

Open in new tab

Component.tsx70 lines

export default function EmptyStateImportArea() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Add your first records
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Explain what content can be imported into this empty collection.
          </p>
        </div>
        <div className="mt-10 grid items-start gap-10 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
          <form className="rounded-lg border border-dashed border-neutral-300 bg-neutral-50 p-6 sm:p-10">
            <label
              htmlFor="empty-state-import-area-file"
              className="block text-lg font-semibold"
            >
              Choose an import file
            </label>
            <p
              id="empty-state-import-area-file-hint"
              className="mt-3 text-sm text-neutral-600"
            >
              CSV or JSON files, up to 10 MB.
            </p>
            <input
              id="empty-state-import-area-file"
              name="file"
              type="file"
              accept=".csv,.json"
              aria-describedby="empty-state-import-area-file-hint"
              className="mt-6 block w-full min-w-0 rounded-md text-sm text-neutral-600 file:mr-3 file:rounded-md file:border file:border-solid file:border-neutral-300 file:bg-white file:px-3 file:py-2 file:text-sm file:font-medium file:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            />
            <div className="mt-8 flex flex-wrap gap-3">
              <button
                type="submit"
                className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Import records
              </button>
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Add manually
              </a>
            </div>
          </form>
          <aside>
            <h2 className="text-base font-semibold">Before importing</h2>
            <ul role="list" className="mt-4 space-y-4 text-sm text-neutral-600">
              <li>Use one record per row.</li>
              <li>Include a header for each field.</li>
              <li>Review required fields before uploading.</li>
            </ul>
            <p className="mt-6 text-sm">
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Download example file
              </a>
            </p>
          </aside>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for an empty collection usually populated by file import. Choose empty-state-centered-icon when manual creation is primary. Variations: accept a spreadsheet format, add a mapping note, or replace the picker with a paste area.
Hierarchy: The h1 explains the empty collection; a visible file label and format hint lead to the native file picker and Import records. The guidance rail explains the format. Heading up to 5 words, lede 16, requirements 8 each.
Responsive: Below 768px guidance follows the file area. The picker is constrained to the available width, and actions wrap. File area padding and title size grow at 640px.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A 2fr/1fr grid at md has 40px gaps. The file-selection region uses a dashed border, neutral-50 surface and 24px padding, growing to 40px at sm. The guidance rail lists three 16px-separated requirements.
States: The native file picker works with keyboard and exposes the chosen filename. It and both navigation actions have visible 2px focus outlines. The dashed area describes the upload region; parsing, file-size validation and import progress need host application integration.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Add your first records                                        │
│Lede                                                          │
│Choose an import file                Before importing         │
│CSV or JSON, up to 10 MB              One record per row      │
│[Choose file] No file chosen          Field headers           │
│[Import records] [Add manually]      Required fields          │
│                                     [Download example]       │
└──────────────────────────────────────────────────────────────┘

View all

Empty state — Access required
Layout tags: stacked,icons,compact
Empty state — Centred icon with action
Layout tags: centered,icons,compact
Empty state — Empty archive with retention summary
Layout tags: split,compact,list

Empty state — Import area with format guidance

Pattern notes

More in Empty state

Empty state — Access required

Empty state — Centred icon with action

Empty state — Empty archive with retention summary