feat: interactive checklist component for business user training page (#990)

mintlify[bot] · web-flow · commit 23995ce10940 · 2026-07-13T17:15:25.000+01:00
Co-authored-by: mintlify[bot] &lt;109931778+mintlify[bot]@users.noreply.github.com&gt;
diff --git a/guides/business-user-training-outcomes-checklist.mdx b/guides/business-user-training-outcomes-checklist.mdx
@@ -3,42 +3,88 @@ title: "Business user training — outcomes checklist"
 description: "What every business user should be able to do in Lightdash by the end of training."
 ---
 
-Work through these during onboarding and check items off as they're covered. Stuck on anything? Follow the docs link on each item, or ask your Lightdash admin or data team.
+import { Checklist, ChecklistItem } from '/snippets/checklist.jsx';
+
+Work through these during onboarding and check items off as they're covered. Your progress is saved in your browser. Stuck on anything? Follow the docs link on each item, or ask your Lightdash admin or data team.
+
+<Checklist storageKey="business-user-training">
 
 ## 01 — Understand metrics & dimensions
 
-- [ ] **Understand the Lightdash semantic layer** — `Viewer` One governed source of truth — metrics and dimensions are defined once in the dbt project, so everyone works from the same definitions. [Docs — Lightdash semantic layer](/guides/lightdash-semantic-layer#lightdash-semantic-layer)
-- [ ] **Understand the difference between dimensions and metrics** — [`Viewer`](/references/workspace/roles#project-roles) Dimensions describe and group; metrics aggregate and measure. [Docs — intro to metrics & dimensions](/get-started/exploring-data/intro-metrics-dimensions)
-- [ ] **Browse curated metrics in the Metrics Catalog** — `Viewer` Go to Browse → Metrics Catalog to see every metric in one place — with descriptions, categories, and owners. [Docs — the Metrics Catalog](/guides/metrics-catalog/catalog)
-- [ ] **Explore a metric from the Metrics Catalog in one click** — [`Interactive Viewer`](/references/workspace/roles#project-roles) Hit Explore on any metric for an instant time-series analysis — compare periods, filter, and segment. [Docs — the Metrics Catalog](/guides/metrics-catalog/catalog)
+<ChecklistItem id="semantic-layer">
+  **Understand the Lightdash semantic layer** — `Viewer` One governed source of truth — metrics and dimensions are defined once in the dbt project, so everyone works from the same definitions. [Docs — Lightdash semantic layer](/guides/lightdash-semantic-layer#lightdash-semantic-layer)
+</ChecklistItem>
+<ChecklistItem id="dims-vs-metrics">
+  **Understand the difference between dimensions and metrics** — [`Viewer`](/references/workspace/roles#project-roles) Dimensions describe and group; metrics aggregate and measure. [Docs — intro to metrics & dimensions](/get-started/exploring-data/intro-metrics-dimensions)
+</ChecklistItem>
+<ChecklistItem id="browse-metrics-catalog">
+  **Browse curated metrics in the Metrics Catalog** — `Viewer` Go to Browse → Metrics Catalog to see every metric in one place — with descriptions, categories, and owners. [Docs — the Metrics Catalog](/guides/metrics-catalog/catalog)
+</ChecklistItem>
+<ChecklistItem id="explore-from-catalog">
+  **Explore a metric from the Metrics Catalog in one click** — [`Interactive Viewer`](/references/workspace/roles#project-roles) Hit Explore on any metric for an instant time-series analysis — compare periods, filter, and segment. [Docs — the Metrics Catalog](/guides/metrics-catalog/catalog)
+</ChecklistItem>
 
 ## 02 — Work with dashboards
 
-- [ ] **Open a dashboard and understand what they're looking at** — `Viewer` Find dashboards from the home page and spaces; read chart titles, descriptions, and last-refreshed time. [Docs — exploring your content](/get-started/exploring-data/exploring-your-content)
-- [ ] **Navigate existing dashboards and charts** — `Viewer` Browse spaces, search for content, and know where curated dashboards live. [Docs — exploring your content](/get-started/exploring-data/exploring-your-content)
-- [ ] **Use built-in filters, add their own, and cross-filter by clicking on charts** — `Viewer` Apply dashboard filters, add a temporary filter, and click a chart value to filter the rest of the dashboard. [Docs — using dashboards (filters & cross-filtering)](/get-started/exploring-data/interactive-dashboards)
-- [ ] **Use Date Zoom to change date granularity on a dashboard** — `Viewer` Switch charts between day, week, month, or year to zoom in on a moment or zoom out to see a trend — without editing the charts. [Docs — Date Zoom](/get-started/exploring-data/interactive-dashboards)
-- [ ] **Drill into the underlying data and export to CSV** — `Interactive Viewer` View underlying records behind a chart, use Drill into to segment a metric, and download the results. [Docs — drill into & view underlying data](/get-started/exploring-data/interactive-dashboards)
-- [ ] **Subscribe to scheduled deliveries so the data comes to them** — `Interactive Viewer` Set up email or Slack deliveries on a schedule. [Docs — scheduled deliveries](/guides/how-to-create-scheduled-deliveries)
+<ChecklistItem id="open-dashboard">
+  **Open a dashboard and understand what they're looking at** — `Viewer` Find dashboards from the home page and spaces; read chart titles, descriptions, and last-refreshed time. [Docs — exploring your content](/get-started/exploring-data/exploring-your-content)
+</ChecklistItem>
+<ChecklistItem id="navigate-dashboards">
+  **Navigate existing dashboards and charts** — `Viewer` Browse spaces, search for content, and know where curated dashboards live. [Docs — exploring your content](/get-started/exploring-data/exploring-your-content)
+</ChecklistItem>
+<ChecklistItem id="filters-and-cross-filter">
+  **Use built-in filters, add their own, and cross-filter by clicking on charts** — `Viewer` Apply dashboard filters, add a temporary filter, and click a chart value to filter the rest of the dashboard. [Docs — using dashboards (filters & cross-filtering)](/get-started/exploring-data/interactive-dashboards)
+</ChecklistItem>
+<ChecklistItem id="date-zoom">
+  **Use Date Zoom to change date granularity on a dashboard** — `Viewer` Switch charts between day, week, month, or year to zoom in on a moment or zoom out to see a trend — without editing the charts. [Docs — Date Zoom](/get-started/exploring-data/interactive-dashboards)
+</ChecklistItem>
+<ChecklistItem id="drill-and-export">
+  **Drill into the underlying data and export to CSV** — `Interactive Viewer` View underlying records behind a chart, use Drill into to segment a metric, and download the results. [Docs — drill into & view underlying data](/get-started/exploring-data/interactive-dashboards)
+</ChecklistItem>
+<ChecklistItem id="scheduled-deliveries">
+  **Subscribe to scheduled deliveries so the data comes to them** — `Interactive Viewer` Set up email or Slack deliveries on a schedule. [Docs — scheduled deliveries](/guides/how-to-create-scheduled-deliveries)
+</ChecklistItem>
 
 ## 03 — Explore the data
 
-- [ ] **Build a simple table, sort it to answer a question, and turn it into a chart** — `Interactive Viewer` Pick fields from a table, sort the results, and switch to a suitable chart type — no SQL required. [Docs — querying from tables](/get-started/exploring-data/using-explores)
-- [ ] **Break a metric down over time or by another dimension** — `Interactive Viewer` Group a metric by week or month, or split it by a category to compare segments. [Docs — querying from tables](/get-started/exploring-data/using-explores)
+<ChecklistItem id="build-simple-table">
+  **Build a simple table, sort it to answer a question, and turn it into a chart** — `Interactive Viewer` Pick fields from a table, sort the results, and switch to a suitable chart type — no SQL required. [Docs — querying from tables](/get-started/exploring-data/using-explores)
+</ChecklistItem>
+<ChecklistItem id="break-down-metric">
+  **Break a metric down over time or by another dimension** — `Interactive Viewer` Group a metric by week or month, or split it by a category to compare segments. [Docs — querying from tables](/get-started/exploring-data/using-explores)
+</ChecklistItem>
 
 ## 04 — Run and share their own analysis
 
-- [ ] **Create their own analysis from scratch in the Explorer** — `Interactive Viewer` Start from a table, build an ad-hoc query, and answer a new question end to end. [Docs — exploring your data](/get-started/exploring-data/using-explores)
-- [ ] **Save charts into spaces** — [`Editor`](/references/workspace/roles#project-roles) Save work to the right space so teammates can find it. [Docs — spaces & saved charts](/get-started/exploring-data/exploring-your-content)
-- [ ] **Build and organise charts into dashboards** — `Editor` Create a new dashboard, arrange tiles, and add headings and context. [Docs — creating dashboards](/get-started/exploring-data/dashboards)
-- [ ] **Export as an image or PDF, or share a link in Slack** — `Viewer` Get insights out of Lightdash and in front of the team. [Docs — exporting & sharing](/get-started/exploring-data/interactive-dashboards)
+<ChecklistItem id="analysis-from-scratch">
+  **Create their own analysis from scratch in the Explorer** — `Interactive Viewer` Start from a table, build an ad-hoc query, and answer a new question end to end. [Docs — exploring your data](/get-started/exploring-data/using-explores)
+</ChecklistItem>
+<ChecklistItem id="save-charts">
+  **Save charts into spaces** — [`Editor`](/references/workspace/roles#project-roles) Save work to the right space so teammates can find it. [Docs — spaces & saved charts](/get-started/exploring-data/exploring-your-content)
+</ChecklistItem>
+<ChecklistItem id="build-dashboards">
+  **Build and organise charts into dashboards** — `Editor` Create a new dashboard, arrange tiles, and add headings and context. [Docs — creating dashboards](/get-started/exploring-data/dashboards)
+</ChecklistItem>
+<ChecklistItem id="export-share">
+  **Export as an image or PDF, or share a link in Slack** — `Viewer` Get insights out of Lightdash and in front of the team. [Docs — exporting & sharing](/get-started/exploring-data/interactive-dashboards)
+</ChecklistItem>
 
 ## 05 — Ask AI
 
-- [ ] **Ask business questions in plain English and get answers backed by curated metrics** — `Interactive Viewer` The AI analyst answers using the same governed definitions as every dashboard. [Docs — using AI agents](/guides/ai-agents/using-ai-agents)
-- [ ] **Know where to access the AI analyst** — `Interactive Viewer` Slack (if configured), Ask AI in the app, and from within dashboards — use Ask AI Agent from a chart or dashboard's menu. [Docs — using AI agents](/guides/ai-agents/using-ai-agents)
-- [ ] **Ask AI about a specific chart or dashboard** — `Interactive Viewer` Launch a conversation with the chart or dashboard pre-loaded as context — click Ask AI Agent from its menu. [Docs — asking about a chart or dashboard](/guides/ai-agents/using-ai-agents#asking-about-a-chart-or-dashboard)
-- [ ] **Give feedback on AI answers with thumbs up / down** — `Interactive Viewer` Any user can rate an agent response — thumbs down lets you optionally explain what went wrong, which helps the data team improve the agent. [Docs — using AI agents](/guides/ai-agents/using-ai-agents)
+<ChecklistItem id="ai-plain-english">
+  **Ask business questions in plain English and get answers backed by curated metrics** — `Interactive Viewer` The AI analyst answers using the same governed definitions as every dashboard. [Docs — using AI agents](/guides/ai-agents/using-ai-agents)
+</ChecklistItem>
+<ChecklistItem id="ai-where-to-access">
+  **Know where to access the AI analyst** — `Interactive Viewer` Slack (if configured), Ask AI in the app, and from within dashboards — use Ask AI Agent from a chart or dashboard's menu. [Docs — using AI agents](/guides/ai-agents/using-ai-agents)
+</ChecklistItem>
+<ChecklistItem id="ai-about-chart">
+  **Ask AI about a specific chart or dashboard** — `Interactive Viewer` Launch a conversation with the chart or dashboard pre-loaded as context — click Ask AI Agent from its menu. [Docs — asking about a chart or dashboard](/guides/ai-agents/using-ai-agents#asking-about-a-chart-or-dashboard)
+</ChecklistItem>
+<ChecklistItem id="ai-feedback">
+  **Give feedback on AI answers with thumbs up / down** — `Interactive Viewer` Any user can rate an agent response — thumbs down lets you optionally explain what went wrong, which helps the data team improve the agent. [Docs — using AI agents](/guides/ai-agents/using-ai-agents)
+</ChecklistItem>
+
+</Checklist>
 
 ## Role reference
 
diff --git a/snippets/checklist.jsx b/snippets/checklist.jsx
@@ -0,0 +1,201 @@
+// Interactive, persistent checklist components for Mintlify docs.
+//
+// Usage on a page:
+//
+//   import { Checklist, ChecklistItem } from '/snippets/checklist.jsx';
+//
+//   <Checklist storageKey="business-user-training">
+//     <ChecklistItem id="semantic-layer">
+//       **Understand the Lightdash semantic layer** — one governed source of truth.
+//     </ChecklistItem>
+//     <ChecklistItem id="dims-vs-metrics">
+//       **Understand the difference between dimensions and metrics** — ...
+//     </ChecklistItem>
+//   </Checklist>
+//
+// Each item's checked state is persisted per-reader in localStorage under
+// `lightdash-checklist:<storageKey>`. The wrapper renders a progress bar and a
+// "Reset" button.
+
+const ChecklistContext = React.createContext(null);
+
+export const Checklist = ({ storageKey, children }) => {
+  const key = `lightdash-checklist:${storageKey || 'default'}`;
+  const [checked, setChecked] = React.useState({});
+  const [hydrated, setHydrated] = React.useState(false);
+
+  // Hydrate from localStorage on mount (client-only).
+  React.useEffect(() => {
+    try {
+      const raw = typeof window !== 'undefined' ? window.localStorage.getItem(key) : null;
+      if (raw) setChecked(JSON.parse(raw));
+    } catch (e) {
+      // ignore malformed storage
+    }
+    setHydrated(true);
+  }, [key]);
+
+  // Persist on change.
+  React.useEffect(() => {
+    if (!hydrated) return;
+    try {
+      window.localStorage.setItem(key, JSON.stringify(checked));
+    } catch (e) {
+      // storage full / blocked — ignore
+    }
+  }, [checked, hydrated, key]);
+
+  const toggle = React.useCallback((id) => {
+    setChecked((prev) => ({ ...prev, [id]: !prev[id] }));
+  }, []);
+
+  const reset = React.useCallback(() => {
+    setChecked({});
+    try {
+      window.localStorage.removeItem(key);
+    } catch (e) {
+      // ignore
+    }
+  }, [key]);
+
+  // Count items by walking the children tree for ChecklistItem elements.
+  const { total, done } = React.useMemo(() => {
+    let t = 0;
+    let d = 0;
+    const walk = (nodes) => {
+      React.Children.forEach(nodes, (child) => {
+        if (!React.isValidElement(child)) return;
+        if (child.type === ChecklistItem) {
+          t += 1;
+          if (checked[child.props.id]) d += 1;
+        } else if (child.props && child.props.children) {
+          walk(child.props.children);
+        }
+      });
+    };
+    walk(children);
+    return { total: t, done: d };
+  }, [children, checked]);
+
+  const percent = total === 0 ? 0 : Math.round((done / total) * 100);
+
+  return (
+    <ChecklistContext.Provider value={{ checked, toggle }}>
+      <div
+        style={{
+          position: 'sticky',
+          top: '5rem',
+          zIndex: 5,
+          margin: '0 0 1.5rem',
+          padding: '0.75rem 1rem',
+          borderRadius: '0.5rem',
+          background: 'var(--card-background, rgba(127,127,127,0.08))',
+          border: '1px solid rgba(127,127,127,0.2)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1rem',
+          flexWrap: 'wrap',
+        }}
+      >
+        <div style={{ flex: '1 1 12rem', minWidth: '12rem' }}>
+          <div
+            style={{
+              fontSize: '0.85rem',
+              fontWeight: 600,
+              marginBottom: '0.35rem',
+              opacity: 0.85,
+            }}
+          >
+            Progress: {done} / {total} ({percent}%)
+          </div>
+          <div
+            style={{
+              height: '0.5rem',
+              width: '100%',
+              background: 'rgba(127,127,127,0.2)',
+              borderRadius: '999px',
+              overflow: 'hidden',
+            }}
+            role="progressbar"
+            aria-valuenow={percent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+          >
+            <div
+              style={{
+                height: '100%',
+                width: `${percent}%`,
+                background: '#7857FE',
+                transition: 'width 200ms ease',
+              }}
+            />
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={reset}
+          disabled={done === 0}
+          style={{
+            fontSize: '0.8rem',
+            fontWeight: 500,
+            padding: '0.4rem 0.8rem',
+            borderRadius: '0.4rem',
+            border: '1px solid rgba(127,127,127,0.35)',
+            background: 'transparent',
+            cursor: done === 0 ? 'not-allowed' : 'pointer',
+            opacity: done === 0 ? 0.5 : 1,
+            color: 'inherit',
+          }}
+        >
+          Reset
+        </button>
+      </div>
+      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>{children}</ul>
+    </ChecklistContext.Provider>
+  );
+};
+
+export const ChecklistItem = ({ id, children }) => {
+  const ctx = React.useContext(ChecklistContext);
+  const isChecked = !!(ctx && ctx.checked[id]);
+  const onChange = () => ctx && ctx.toggle(id);
+  const inputId = `checklist-${id}`;
+
+  return (
+    <li
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: '0.65rem',
+        padding: '0.5rem 0',
+        borderBottom: '1px solid rgba(127,127,127,0.15)',
+      }}
+    >
+      <input
+        id={inputId}
+        type="checkbox"
+        checked={isChecked}
+        onChange={onChange}
+        style={{
+          marginTop: '0.35rem',
+          width: '1.05rem',
+          height: '1.05rem',
+          cursor: 'pointer',
+          accentColor: '#7857FE',
+          flexShrink: 0,
+        }}
+      />
+      <label
+        htmlFor={inputId}
+        style={{
+          cursor: 'pointer',
+          opacity: isChecked ? 0.55 : 1,
+          textDecoration: isChecked ? 'line-through' : 'none',
+          lineHeight: 1.5,
+        }}
+      >
+        {children}
+      </label>
+    </li>
+  );
+};
