Dashboard — Sequential conversion funnel

Four numbered stage cards show entry counts and retention, followed by a conversion summary. Use to inspect drop-off through a short process.

ReactHTML

1440 × 900

Open in new tab

Component.tsx112 lines

export default function DashboardFunnelStages() {
  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">
            Process conversion
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Explain the period and process represented by these stage counts.
          </p>
        </div>
        <ol
          role="list"
          className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4"
        >
          <li className="min-w-0 rounded-lg border border-neutral-200 p-6">
            <p className="text-xs font-mono text-neutral-500">01</p>
            <h2 className="mt-3 text-base font-semibold">Started</h2>
            <p className="mt-6 text-3xl font-semibold tracking-tight tabular-nums">
              1,200
            </p>
            <p className="mt-2 text-sm text-neutral-600">100% of entries</p>
            <div
              role="meter"
              aria-label="Started retention"
              aria-valuemin={0}
              aria-valuemax={100}
              aria-valuenow={100}
              className="mt-6 h-2 rounded-full bg-neutral-100"
            >
              <div className="h-full w-full rounded-full bg-neutral-900" />
            </div>
          </li>
          <li className="min-w-0 rounded-lg border border-neutral-200 p-6">
            <p className="text-xs font-mono text-neutral-500">02</p>
            <h2 className="mt-3 text-base font-semibold">Qualified</h2>
            <p className="mt-6 text-3xl font-semibold tracking-tight tabular-nums">
              900
            </p>
            <p className="mt-2 text-sm text-neutral-600">75% retained</p>
            <div
              role="meter"
              aria-label="Qualified retention"
              aria-valuemin={0}
              aria-valuemax={100}
              aria-valuenow={75}
              className="mt-6 h-2 rounded-full bg-neutral-100"
            >
              <div className="h-full w-3/4 rounded-full bg-neutral-900" />
            </div>
          </li>
          <li className="min-w-0 rounded-lg border border-neutral-200 p-6">
            <p className="text-xs font-mono text-neutral-500">03</p>
            <h2 className="mt-3 text-base font-semibold">Reviewed</h2>
            <p className="mt-6 text-3xl font-semibold tracking-tight tabular-nums">
              600
            </p>
            <p className="mt-2 text-sm text-neutral-600">50% retained</p>
            <div
              role="meter"
              aria-label="Reviewed retention"
              aria-valuemin={0}
              aria-valuemax={100}
              aria-valuenow={50}
              className="mt-6 h-2 rounded-full bg-neutral-100"
            >
              <div className="h-full w-1/2 rounded-full bg-neutral-900" />
            </div>
          </li>
          <li className="min-w-0 rounded-lg border border-neutral-200 p-6">
            <p className="text-xs font-mono text-neutral-500">04</p>
            <h2 className="mt-3 text-base font-semibold">Completed</h2>
            <p className="mt-6 text-3xl font-semibold tracking-tight tabular-nums">
              300
            </p>
            <p className="mt-2 text-sm text-neutral-600">25% retained</p>
            <div
              role="meter"
              aria-label="Completed retention"
              aria-valuemin={0}
              aria-valuemax={100}
              aria-valuenow={25}
              className="mt-6 h-2 rounded-full bg-neutral-100"
            >
              <div className="h-full w-1/4 rounded-full bg-neutral-900" />
            </div>
          </li>
        </ol>
        <aside className="mt-8 flex flex-wrap items-center justify-between gap-6 rounded-lg bg-neutral-50 p-6">
          <div>
            <h2 className="text-base font-semibold">Overall completion</h2>
            <p className="mt-2 text-sm text-neutral-600">
              300 of 1,200 entries completed the process.
            </p>
          </div>
          <p className="text-3xl font-semibold tracking-tight tabular-nums">
            25%
          </p>
        </aside>
        <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"
          >
            View stage records
          </a>
        </p>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a short conversion or completion process. Choose a time-series chart dashboard for changes over time. Variations: show three stages, replace counts with revenue, or add per-stage change notes.
Hierarchy: The h1 sets context, stage numbers establish sequence, and 30px tabular counts dominate each card. Retention text reinforces every meter. Stage titles allow 2 words, h1 5, lede 18 and summary 12.
Responsive: The funnel is a single vertical sequence under sm, two columns at sm and four at lg. Bars use proportional static widths within their cards. The summary band wraps at narrow widths.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A stage grid begins 40px below the heading: two columns at sm and four at lg, with 24px gaps and p-6 cards. Each has a 30px count and 8px retention track. A wrapping summary band follows after 32px.
States: Meters expose labelled numeric values and visible percentages; the static stage illustration has no interactive chart controls. The records link shows keyboard focus. Filtering and metric updates require host application integration.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Process conversion                                            │
│01 Started    02 Qualified    03 Reviewed    04 Completed     │
│1,200         900             600            300              │
│100%          75%             50%            25%              │
│[==========]  [=======   ]    [=====     ]   [==        ]     │
│Overall completion                                   25%      │
│300 of 1,200 entries completed the process                    │
│[View stage records]                                          │
└──────────────────────────────────────────────────────────────┘

View all

Dashboard — Activity feed
Layout tags: stacked,list,compact
Dashboard — App shell with sidebar
Layout tags: sidebar,grid,numbers
Dashboard — Bento overview
Layout tags: bento,numbers,media

Dashboard — Sequential conversion funnel

Pattern notes

More in Dashboard

Dashboard — Activity feed

Dashboard — App shell with sidebar

Dashboard — Bento overview