{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "onboarding",
  "name": "Onboarding checklist",
  "category": "Feedback",
  "description": "The first steps of a new account, with progress, done states and one action per step.",
  "tags": [
    "onboarding",
    "checklist",
    "setup",
    "getting started",
    "tasks",
    "progress",
    "saas",
    "first run",
    "activation"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "onboarding checklist",
      "getting started steps",
      "setup progress",
      "first run"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/onboarding",
  "markdownUrl": "https://mian.ro/ai/components/onboarding.md",
  "classes": [
    {
      "name": "mn-tasks",
      "description": "The list (<ol>)."
    },
    {
      "name": "mn-task",
      "description": "A step: mn-task-check, mn-task-title, mn-task-desc and an optional button. data-done marks it complete."
    }
  ],
  "accessibility": [
    "Use an ordered list and say “Done” in text for completed steps (a visually hidden span).",
    "Put the overall progress in words too (“2 of 4 done”)."
  ],
  "examples": [
    {
      "title": "Getting started",
      "description": null,
      "html": "<div class=\"mn-card\" style=\"max-width:32rem\"><div class=\"mn-card-header\"><div class=\"mn-row\" style=\"justify-content:space-between\"><h3 class=\"mn-card-title\">Set up Ledger</h3><span class=\"mn-muted mn-small\">2 of 4 done</span></div><div class=\"mn-progress mn-progress-sm\" role=\"progressbar\" aria-label=\"Setup\" aria-valuenow=\"50\" style=\"--_v:50%;margin-top:.5rem\"></div></div>\n<div class=\"mn-card-body\"><ol class=\"mn-tasks\">\n  <li class=\"mn-task\" data-done><span class=\"mn-task-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span><p class=\"mn-task-title\"><span class=\"mn-sr-only\">Done: </span>Create your workspace</p><p class=\"mn-task-desc\">Named, with your company’s currency.</p></li>\n  <li class=\"mn-task\" data-done><span class=\"mn-task-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span><p class=\"mn-task-title\"><span class=\"mn-sr-only\">Done: </span>Connect a bank account</p><p class=\"mn-task-desc\">Read-only, takes about two minutes.</p></li>\n  <li class=\"mn-task\"><span class=\"mn-task-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span><p class=\"mn-task-title\">Invite your accountant</p><p class=\"mn-task-desc\">They get a free seat.</p><a class=\"mn-btn mn-btn-sm\" href=\"#\">Invite</a></li>\n  <li class=\"mn-task\"><span class=\"mn-task-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span><p class=\"mn-task-title\">Approve your first matches</p><p class=\"mn-task-desc\">Ledger learns from every approval.</p><a class=\"mn-btn mn-btn-sm mn-btn-outline\" href=\"#\">Review</a></li>\n</ol></div></div>"
    }
  ],
  "css": ".mn-tasks { display: grid; margin: 0; padding: 0; list-style: none; }\n.mn-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .85rem; align-items: start; padding: .9rem 0; border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-task:first-child { border-top: 0; }\n.mn-task > * { margin: 0; }\n.mn-task-check { display: grid; place-items: center; grid-row: span 2; width: 1.35rem; height: 1.35rem; margin-top: .05rem; border: 1.5px solid var(--mn-input); border-radius: 50%; color: transparent; }\n.mn-task-check svg { width: .8rem; height: .8rem; }\n.mn-task[data-done] .mn-task-check { border-color: var(--mn-success); background: var(--mn-success); color: var(--mn-success-fg); }\n.mn-task-title { font-weight: 600; font-size: .9375rem; line-height: 1.35; }\n.mn-task[data-done] .mn-task-title { color: var(--mn-muted); text-decoration: line-through; text-decoration-thickness: 1px; }\n.mn-task-desc { grid-column: 2; color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.5; }\n.mn-task > .mn-btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/onboarding.json"
  }
}