Dashboard — Status-column work board

Three status columns group task cards with per-column creation links. Use to view work progression without a dense metrics dashboard.

ReactHTML

1440 × 900

Open in new tab

Component.tsx135 lines

export default function DashboardKanbanBoard() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header className="flex flex-wrap items-end justify-between gap-6">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Work overview
            </h1>
            <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
              Review the tasks in each stage of the workflow.
            </p>
          </div>
          <a
            href="#"
            className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Add work item
          </a>
        </header>
        <div className="mt-10 grid items-start gap-6 md:grid-cols-3">
          <section className="min-w-0 rounded-lg bg-neutral-50 p-4">
            <header className="flex items-center justify-between gap-3">
              <h2 className="text-base font-semibold">To do</h2>
              <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
                2
              </span>
            </header>
            <ul role="list" className="mt-4 space-y-3">
              <li className="rounded-lg border border-neutral-200 bg-white p-4">
                <h3 className="text-sm font-semibold">Task title</h3>
                <p className="mt-2 text-xs text-neutral-500">Alex Rivera</p>
                <p className="mt-4 text-xs">
                  <a
                    href="#"
                    aria-label="Open task title in to do"
                    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"
                  >
                    Open task
                  </a>
                </p>
              </li>
              <li className="rounded-lg border border-neutral-200 bg-white p-4">
                <h3 className="text-sm font-semibold">Work item title</h3>
                <p className="mt-2 text-xs text-neutral-500">Jordan Lee</p>
                <p className="mt-4 text-xs">
                  <a
                    href="#"
                    aria-label="Open work item title in to do"
                    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"
                  >
                    Open task
                  </a>
                </p>
              </li>
            </ul>
            <p className="mt-4 text-sm">
              <a
                href="#"
                aria-label="Add task to to do"
                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 task
              </a>
            </p>
          </section>
          <section className="min-w-0 rounded-lg bg-neutral-50 p-4">
            <header className="flex items-center justify-between gap-3">
              <h2 className="text-base font-semibold">In progress</h2>
              <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
                1
              </span>
            </header>
            <ul role="list" className="mt-4 space-y-3">
              <li className="rounded-lg border border-neutral-200 bg-white p-4">
                <h3 className="text-sm font-semibold">Active task title</h3>
                <p className="mt-2 text-xs text-neutral-500">Sam Taylor</p>
                <p className="mt-4 text-xs">
                  <a
                    href="#"
                    aria-label="Open active task title in in progress"
                    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"
                  >
                    Open task
                  </a>
                </p>
              </li>
            </ul>
            <p className="mt-4 text-sm">
              <a
                href="#"
                aria-label="Add task to in progress"
                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 task
              </a>
            </p>
          </section>
          <section className="min-w-0 rounded-lg bg-neutral-50 p-4">
            <header className="flex items-center justify-between gap-3">
              <h2 className="text-base font-semibold">Done</h2>
              <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
                1
              </span>
            </header>
            <ul role="list" className="mt-4 space-y-3">
              <li className="rounded-lg border border-neutral-200 bg-white p-4">
                <h3 className="text-sm font-semibold">Completed task title</h3>
                <p className="mt-2 text-xs text-neutral-500">Alex Rivera</p>
                <p className="mt-4 text-xs">
                  <a
                    href="#"
                    aria-label="Open completed task title in done"
                    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"
                  >
                    Open task
                  </a>
                </p>
              </li>
            </ul>
            <p className="mt-4 text-sm">
              <a
                href="#"
                aria-label="Add task to done"
                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 task
              </a>
            </p>
          </section>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a small task board organized by workflow stage. Choose dashboard-tile-board for a uniform status grid. Variations: add a review column, include due dates in cards, or show one card per active owner.
Hierarchy: The h1 names the work scope, then status headings and counts give structure. Task titles are 14px semibold and owners 12px muted. Each repeated action names its task or status column. H1 up to 5 words, lede 14 and task titles 5.
Responsive: Below 768px columns stack in workflow order rather than scrolling horizontally. Task copy wraps inside each card. The heading and section padding grow at sm.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. Three equal md columns use 24px gaps, neutral-50 surfaces and 16px padding. Status/count headers precede 12px-separated white p-4 task cards. Each column ends in an underlined Add task link.
States: All task and add links have visible 2px keyboard-focus outlines. Columns show status as text and counts. Cards are static; moving tasks, adding work and persisting workflow changes require application integration.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Work overview                              [Add work item]    │
│To do (2)            In progress (1)     Done (1)             │
│Task title           Active task title   Completed task       │
│Alex Rivera          Sam Taylor          Alex Rivera          │
│[Open task]          [Open task]         [Open task]          │
│Work item title                                               │
│Jordan Lee                                                    │
│[Open task]                                                   │
│[Add task]           [Add task]          [Add task]           │
└──────────────────────────────────────────────────────────────┘

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 — Status-column work board

Pattern notes

More in Dashboard

Dashboard — Activity feed

Dashboard — App shell with sidebar

Dashboard — Bento overview