Empty Dashboard

Preview in your theme

A brand-new account: three open steps, a skeleton of the dashboard-to-be, and the sample-data escape hatch. The third step uses an href (a real page on this site) instead of a handler — the app marks it done when the user comes back.

Every button here is wired: the CTAs mark their step done, Skip / Undo skip move the row between states, and “Load sample data” asks first.

Welcome — your dashboard is ready to fill

Three short steps and this page starts showing your own numbers. You can do them in any order.

Set up your workspace

0 of 3 done · 3 left

Not started
Connect your first data source3 min
Point us at a database, a warehouse or a CSV drop and the charts below start filling in.
Not started
Invite your team1 min
Dashboards are more useful when the people who act on them can see them too.
Not started
Create your first project5 min
Pick the metrics you care about; you can rearrange them later.
Open the builder

Want to look around first? Fill this workspace with example records.

Preview

Sample layout

Placeholder shapes showing where your charts and records will sit. No figures are shown because there is nothing to report yet.

Sample — not your data

Mid-setup with a skip. Skipped rows keep their own marker, their own badge and their own muted segment on the meter; they never count toward “done”. Press “Undo skip” to put the row back.

Two done, one skipped, two left — the meter reads 2 of 5, because a skipped step is resolved, not achieved.

Welcome back — one project away from a real dashboard

Two steps are behind you. The rest can wait, but the numbers stay empty until a project exists.

Finish setting up

2 of 5 done · 1 skipped · 2 left

Done
Connect your first data source
Done
Verify your email address
Skipped
Invite your teamSkipped
Not started
Create your first project5 min
Pick the metrics you care about; you can rearrange them later.
Not started
Set up an alert2 min
Get a message when a number crosses a threshold you care about.

Preview

Sample layout

Placeholder shapes showing where your charts and records will sit. No figures are shown because there is nothing to report yet.

Sample — not your data

Handing the space back: one open step left. Finish it (or skip it) and the block renders nothing and calls onComplete once — the counter below proves it fires exactly once per completion.

Resolve the last open step and the block disappears, firing onComplete once.

onComplete calls: 0

Welcome — your dashboard is ready to fill

Three short steps and this page starts showing your own numbers. You can do them in any order.

Set up your workspace

1 of 3 done · 1 skipped · 1 left

Done
Connect your first data source
Skipped
Invite your teamSkipped
Not started
Create your first project
This is the last open step — resolve it and the block hands the page back.

Without the preview column, with a step the product genuinely requires (skippable: false — no Skip control is rendered), and with irreversible sample data: the confirmation says so instead of promising an undo that does not exist.

showPreview={false} + a non-skippable step + sampleDataReversible={false} (read the confirmation copy).

Before this workspace can ingest customer data

Compliance steps first. Nothing is ingested until the organisation is verified.

Required before ingest

0 of 2 done · 2 left

Not started
Verify your organisation before ingesting customer records
Regulated workspaces cannot ingest customer data until an administrator has verified the organisation, so this one has no Skip control at all.
Not started
Upload the signing certificate for organisation-verification-eu-central-1-primary
Long unbroken identifiers wrap instead of pushing the card sideways.

Want to look around first? Fill this workspace with example records.

Loading preview…

"use client"

import * as React from "react"
import { ArrowRight, Check, Database, Minus } from "lucide-react"
import { cn } from "@/lib/utils"

/**
 * "skipped" is deliberately a third status rather than a boolean on top of
 * "done": a user who skips "invite your team" has resolved that row, but the
 * account is NOT set up. Folding the two together is how onboarding progress
 * ends up lying about activation.
 */
export type OnboardingTaskStatus = "todo" | "done" | "skipped"

Installation

npx shadcn@latest add https://ui.zyeon.ai/r/empty-dashboard.json

Prompt

Build a React + TypeScript + Tailwind "EmptyDashboard" block (lucide-react
icons) — the whole first screen of a brand-new account, not a single empty
panel inside an otherwise working page.

Contract
- Props extend React.ComponentPropsWithoutRef<"section"> minus "title";
  className merges through cn() and the rest spread on the root. forwardRef to
  the section.
- tasks: OnboardingTask[] where OnboardingTask = { id, title, description?,
  status: "todo" | "done" | "skipped", action, skippable?, estimateLabel? }.
  Duplicate ids are dropped (first wins) — they would collide on React keys and
  make Skip toggle the wrong row.
- status is a THREE-valued enum on purpose. "skipped" is not a flavour of
  "done": a user who skipped "invite your team" resolved that row, but the
  account is not set up. Never model it as a boolean.
- action is a discriminated union: { label, href, onClick? } | { label,
  href?: undefined, onClick }. Passing neither must be a type error — a
  first-run checklist whose rows do nothing is worse than no checklist.
- Callbacks: onTaskStatusChange?(id, next) (presence enables Skip / Undo skip),
  onComplete?(summary: { total, completed, skipped }), onLoadSampleData?
  (presence enables the sample-data block).
- Copy / layout: title, description, checklistTitle (also the progress bar's
  accessible name), sampleDataReversible = true, showPreview = true.

Behavior
- PROGRESS IS DERIVED, never stored. completed = tasks with status "done";
  skipped = tasks with status "skipped"; remaining = total - completed -
  skipped. The counter reads "2 of 5 done · 1 skipped · 2 left" and drops the
  middle clause when nothing is skipped. aria-valuenow is the DONE count and
  aria-valuemax is the total, so a skipped step can never inflate the meter.
- The bar has two segments: bg-primary sized to done/total, then a muted
  segment sized to skipped/total. One bar that fills for both statuses is the
  exact lie this component exists to prevent.
- Retirement: when no task is left in "todo", the block returns null and calls
  onComplete exactly once (ref-guarded, and re-armed if a task goes back to
  "todo"). A first-run panel that outlives first run is clutter; the consumer
  gets the summary and decides what fills the space.
- Skipping: Skip for now renders only for "todo" rows that are skippable and
  only when onTaskStatusChange exists. A skipped row keeps its own dashed
  marker, a visible "Skipped" badge, an "Undo skip" control, and the sr-only
  text "Skipped" — never a strikethrough, which reads as completed.
- The skeleton preview is a picture of the future, so it must be impossible to
  mistake for reporting: every shape is aria-hidden geometry with NO text at
  all, and the region carries two visible markers — a "Sample layout" badge in
  its header and a "Sample — not your data" watermark centred over the canvas.
  Assert the invariant in tests: the preview region's text contains no digits.
- Loading sample data writes to the account, so it is a two-step action: the
  trigger swaps itself for an inline confirmation naming what will be written,
  who will see it, and whether it can be undone (sampleDataReversible drives
  that sentence — never promise an undo the backend does not have). Escape and
  Cancel return to the trigger; the confirm handler is guarded by a ref so five
  clicks in one tick still produce exactly one call.
- Focus follows that swap: opening the confirmation moves focus to Cancel (the
  safe option — the panel was opened by a click, so the destructive-adjacent
  button must not be one Enter away), cancelling returns focus to the trigger,
  and confirming moves it to the tabIndex={-1} result line. Without this the
  focus lands on <body> the moment the trigger unmounts.
- Dead affordances degrade instead of lying: an href that is blank or "#" is
  treated as absent, and with no onClick behind it the action renders as plain
  text rather than a button that does nothing.
- Progress changes are announced through one polite role="status" region,
  coalesced with a ~700ms timer so ticking three rows produces one
  announcement; the first paint is the baseline, not news. Clear the timer on
  unmount.

Rendering & styling
- Semantic tokens only: bg-card panels, bg-primary / text-primary-foreground
  for the one primary action per row, bg-muted track with a
  bg-muted-foreground/30 skipped segment, text-muted-foreground for supporting
  copy, border-dashed for everything that represents "not real yet".
  hover:bg-foreground/5 for quiet controls — hover:bg-accent would be a no-op
  in the light theme, where accent/muted/secondary share one value.
- Structure: a section labelled by its h2, an h3 per column, and the checklist
  as a real ordered list, since these are numbered setup steps — with an
  explicit role="list", because Tailwind's preflight strips list-style and some
  screen readers drop the list semantics with it. The progress bar is
  role="progressbar" with aria-valuemin/max/now plus aria-valuetext carrying
  the same sentence the sighted user reads.
- Layout: one column by default, splitting into checklist + preview at lg with
  minmax(0,·) tracks and items-start, so the preview hugs its content instead
  of stretching into a tall empty dashed box that reads as a failed load. Task
  titles use wrap-anywhere with min-w-0 ancestors — both are needed; either one
  alone still lets a long unbroken identifier push the card sideways.
- Motion: the skeleton pulse is motion-safe-gated and the bar's width
  transition is motion-reduce-gated, so reduced motion is completely still
  while every number and control still works.

Customization levers
- Task set: the block is driven entirely by the tasks array — add, reorder or
  translate steps without touching the render tree. estimateLabel is the cheap
  way to raise completion ("2 min" next to a title).
- Required steps: skippable: false removes the Skip control for steps the
  product genuinely cannot proceed without.
- Retirement policy: onComplete + returning null is the default. To keep a
  celebration on screen instead, render your own panel when onComplete fires;
  to retire only on full completion (ignoring skips), filter skipped rows out
  of the tasks you pass in.
- Density and columns: drop the preview with showPreview={false} for a narrow
  sidebar placement; change the lg grid ratio for a wider or narrower preview.
- The preview canvas: swap the three placeholder groups (stat row / bar block /
  record rows) for shapes that match your real dashboard, keeping the two rules
  intact — no text inside the canvas, and the sample markers stay.
- Sample data: omit onLoadSampleData to hide the escape hatch entirely; set
  sampleDataReversible={false} to switch the confirmation to the "cannot be
  undone" wording.

Concepts

Skip is not done — skipped is a third status, not a boolean on top of done. It resolves the row (so the block can retire) but never moves aria-valuenow, never fills the primary segment, and never gets a strikethrough. Folding the two together is how activation dashboards end up reporting setup that never happened.
Derived progress — every number on screen is recomputed from the task array on each render; nothing is stored, so the meter cannot drift from the rows underneath it. The same string feeds the visible counter and aria-valuetext.
Self-retiring panel — with nothing left in todo the component renders nothing and fires onComplete once, handing the page back instead of squatting on the home screen forever. The guard is a ref, so it survives re-renders and re-arms if a task returns to todo.
Labelled skeleton preview — the "what this will look like" region is aria-hidden geometry with no text at all, plus a badge and a watermark. The testable invariant is that the region contains no digits: a screenshot of an empty dashboard must never be mistakable for a report.
Confirmed side effect — loading sample data writes to the account, so the trigger swaps itself for an inline confirmation that names what gets written, who sees it, and whether it can be undone; focus moves to the safe option, Escape backs out, and a ref guard keeps rapid clicks to a single call.
Honest affordance — an action needs a real href or a real onClick at the type level, and a blank or # href degrades to plain text rather than rendering a button with nothing behind it.

Set up your workspace

Preview

Finish setting up

Preview

Set up your workspace

Required before ingest

Installation

Prompt

Concepts

On This Page

Set up your workspace

Preview

Finish setting up

Preview

Set up your workspace

Required before ingest