Empty state — First-run checklist

A setup panel with progress and three full-row step links. Use it to guide a first-time user through a short sequence without a separate primary button.

ReactHTML

1440 × 480

Open in new tab

Component.tsx46 lines

export default function EmptyStateFirstRunChecklist() {
  return (
    <div className="w-72 rounded-lg border border-neutral-200 bg-white p-5 text-neutral-900 sm:w-96">
      <p className="text-sm font-medium text-neutral-500">Get started · 1 of 3 done</p>
      <div role="progressbar" aria-label="Setup completion" aria-valuemin={0} aria-valuemax={3} aria-valuenow={1} aria-valuetext="1 of 3 steps completed" className="mt-2 h-1 overflow-hidden rounded-full bg-neutral-200 forced-colors:outline forced-colors:outline-[CanvasText]">
        <div aria-hidden="true" className="h-full w-1/3 bg-neutral-900 forced-colors:bg-[CanvasText]" />
      </div>
      <h2 className="mt-4 text-base font-semibold">Title for the setup steps</h2>
      <p className="mt-1 text-sm text-neutral-600">A short guide to setup.</p>
      <ol role="list" className="mt-4">
        <li>
          <a href="#" className="flex items-center gap-2 rounded-md p-2 text-sm transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <span aria-hidden="true" className="flex size-6 shrink-0 items-center justify-center rounded-full border border-neutral-300 text-xs font-medium">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5">
                <path d="m5 12 4 4L19 6" />
              </svg>
            </span>
            <span className="min-w-0 flex-1">Profile details</span>
            <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Done</span>
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 text-neutral-400">
              <path d="m9 5 7 7-7 7" />
            </svg>
          </a>
        </li>
        <li>
          <a href="#" className="flex items-center gap-2 rounded-md p-2 text-sm transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <span aria-hidden="true" className="flex size-6 shrink-0 items-center justify-center rounded-full border border-neutral-300 text-xs font-medium">2</span>
            <span className="min-w-0 flex-1">Add first item</span>
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 text-neutral-400">
              <path d="m9 5 7 7-7 7" />
            </svg>
          </a>
        </li>
        <li>
          <a href="#" className="flex items-center gap-2 rounded-md p-2 text-sm transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <span aria-hidden="true" className="flex size-6 shrink-0 items-center justify-center rounded-full border border-neutral-300 text-xs font-medium">3</span>
            <span className="min-w-0 flex-1">Invite members</span>
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 text-neutral-400">
              <path d="m9 5 7 7-7 7" />
            </svg>
          </a>
        </li>
      </ol>
    </div>
  )
}

Pattern notes

When to use: Use for a short onboarding sequence. Pick empty-state-centered-icon when there is only one next action. Variations: use four compact steps, link a completed step to review, or replace the progress bar with a fraction only.
Hierarchy: Read progress, 16px semibold heading, a one-line explanation and the three step actions. Keep heading up to 5 words, explanation up to 6, and step titles up to 3. The completed step has a check and an explicit 12px Done badge. The progressbar exposes min 0, max 3 and value 1.
Responsive: The ordered stack remains at every width. Width grows from 288px to 384px at 640px. Titles use the flexible middle column while number, Done badge and chevron keep their sizes; the panel stays below 384px tall.
Layout: A 288px (w-72), 384px from 640px (sm:w-96), bordered rounded-lg panel with p-5 (20px). A 14px progress label sits above a 4px neutral-200 track with one-third neutral-900 fill. A 16px heading follows by 16px and a 14px description by 4px. The ordered list starts 16px below; each rounded-md link has 8px padding, a 24px outlined number circle, a flexible title and a 16px chevron, with 8px gaps.
States: Row links hover to neutral-50 and show a 2px neutral-900 focus-visible outline offset 2px. Completion is a check, outlined circle and Done wording; the progress fill has a forced-colors CanvasText treatment. No JavaScript toggles, separate CTA or disabled steps.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│Get started / 1 of 3 done                             │
│─────────────────────────────────                     │
│Title for the setup steps                             │
│One-line setup explanation                            │
│[Check  Completed step                 Done  >]       │
│[  2    Next setup step                      >]       │
│[  3    Final setup step                     >]       │
└──────────────────────────────────────────────────────┘

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 — First-run checklist

Pattern notes

More in Empty state

Empty state — Access required

Empty state — Centred icon with action

Empty state — Empty archive with retention summary