{
  "name": "user-onboarding-checklist",
  "kind": "block",
  "primary": "card-ui",
  "page": "/catalog/ui-patterns/app/onboarding-checklist/onboarding-checklist.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui>\n  <header>\n    <h3>Get started</h3>\n    <p slot=\"description\">2 of 5 complete</p>\n    <progress-ui slot=\"action\" value=\"40\" style=\"width:160px\"></progress-ui>\n  </header>\n  <section>\n    <list-ui divider>\n      <list-item-ui>\n        <check-ui slot=\"icon\" checked></check-ui>\n        <text-ui slot=\"text\" strong>Complete your profile</text-ui>\n        <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Add your name, avatar, and timezone</text-ui>\n        <button-ui slot=\"action\" text=\"Done\" variant=\"ghost\" size=\"sm\" disabled></button-ui>\n      </list-item-ui>\n      <list-item-ui>\n        <check-ui slot=\"icon\" checked></check-ui>\n        <text-ui slot=\"text\" strong>Invite your team</text-ui>\n        <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Add at least one teammate</text-ui>\n        <button-ui slot=\"action\" text=\"Done\" variant=\"ghost\" size=\"sm\" disabled></button-ui>\n      </list-item-ui>\n      <list-item-ui>\n        <check-ui slot=\"icon\"></check-ui>\n        <text-ui slot=\"text\" strong>Connect an integration</text-ui>\n        <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Slack, GitHub, or Linear</text-ui>\n        <button-ui slot=\"action\" text=\"Start\" variant=\"primary\" size=\"sm\" icon-trailing=\"arrow-right\"></button-ui>\n      </list-item-ui>\n      <list-item-ui>\n        <check-ui slot=\"icon\"></check-ui>\n        <text-ui slot=\"text\" strong>Set up your first workflow</text-ui>\n        <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Automate one repeating task</text-ui>\n        <button-ui slot=\"action\" text=\"Start\" variant=\"outline\" size=\"sm\"></button-ui>\n      </list-item-ui>\n      <list-item-ui>\n        <check-ui slot=\"icon\"></check-ui>\n        <text-ui slot=\"text\" strong>Take the product tour</text-ui>\n        <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">5 minutes to see the highlights</text-ui>\n        <button-ui slot=\"action\" text=\"Start\" variant=\"outline\" size=\"sm\"></button-ui>\n      </list-item-ui>\n    </list-ui>\n  </section>\n</card-ui>",
  "source": "catalog/ui-patterns/app/onboarding-checklist/onboarding-checklist.contents.html",
  "metadata": {
    "domain": "forms",
    "description": "User onboarding checklist — step-by-step setup checklist for new users. Tracks completion of profile, team invite, integration, workflow, and tour steps.",
    "keywords": [
      "onboarding",
      "checklist",
      "user",
      "setup",
      "steps",
      "progress",
      "todo",
      "complete",
      "activate",
      "setup-checklist",
      "wizard",
      "task",
      "new-user",
      "welcome"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Get started"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "2 of 5 complete"
    },
    {
      "id": "progress",
      "component": "Progress",
      "slot": "action",
      "value": 40
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2",
        "progress"
      ]
    },
    {
      "id": "check-box",
      "component": "CheckBox",
      "slot": "icon",
      "checked": true
    },
    {
      "id": "text-3",
      "component": "Text",
      "slot": "text",
      "strong": true,
      "textContent": "Complete your profile"
    },
    {
      "id": "text-4",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "size": "sm",
      "textContent": "Add your name, avatar, and timezone"
    },
    {
      "id": "button",
      "component": "Button",
      "slot": "action",
      "disabled": true,
      "size": "sm",
      "text": "Done",
      "variant": "ghost"
    },
    {
      "id": "list-item",
      "component": "ListItem",
      "children": [
        "check-box",
        "text-3",
        "text-4",
        "button"
      ]
    },
    {
      "id": "check-box-2",
      "component": "CheckBox",
      "slot": "icon",
      "checked": true
    },
    {
      "id": "text-5",
      "component": "Text",
      "slot": "text",
      "strong": true,
      "textContent": "Invite your team"
    },
    {
      "id": "text-6",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "size": "sm",
      "textContent": "Add at least one teammate"
    },
    {
      "id": "button-2",
      "component": "Button",
      "slot": "action",
      "disabled": true,
      "size": "sm",
      "text": "Done",
      "variant": "ghost"
    },
    {
      "id": "list-item-2",
      "component": "ListItem",
      "children": [
        "check-box-2",
        "text-5",
        "text-6",
        "button-2"
      ]
    },
    {
      "id": "check-box-3",
      "component": "CheckBox",
      "slot": "icon"
    },
    {
      "id": "text-7",
      "component": "Text",
      "slot": "text",
      "strong": true,
      "textContent": "Connect an integration"
    },
    {
      "id": "text-8",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "size": "sm",
      "textContent": "Slack, GitHub, or Linear"
    },
    {
      "id": "button-3",
      "component": "Button",
      "slot": "action",
      "icon-trailing": "arrow-right",
      "size": "sm",
      "text": "Start",
      "variant": "primary"
    },
    {
      "id": "list-item-3",
      "component": "ListItem",
      "children": [
        "check-box-3",
        "text-7",
        "text-8",
        "button-3"
      ]
    },
    {
      "id": "check-box-4",
      "component": "CheckBox",
      "slot": "icon"
    },
    {
      "id": "text-9",
      "component": "Text",
      "slot": "text",
      "strong": true,
      "textContent": "Set up your first workflow"
    },
    {
      "id": "text-10",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "size": "sm",
      "textContent": "Automate one repeating task"
    },
    {
      "id": "button-4",
      "component": "Button",
      "slot": "action",
      "size": "sm",
      "text": "Start",
      "variant": "outline"
    },
    {
      "id": "list-item-4",
      "component": "ListItem",
      "children": [
        "check-box-4",
        "text-9",
        "text-10",
        "button-4"
      ]
    },
    {
      "id": "check-box-5",
      "component": "CheckBox",
      "slot": "icon"
    },
    {
      "id": "text-11",
      "component": "Text",
      "slot": "text",
      "strong": true,
      "textContent": "Take the product tour"
    },
    {
      "id": "text-12",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "size": "sm",
      "textContent": "5 minutes to see the highlights"
    },
    {
      "id": "button-5",
      "component": "Button",
      "slot": "action",
      "size": "sm",
      "text": "Start",
      "variant": "outline"
    },
    {
      "id": "list-item-5",
      "component": "ListItem",
      "children": [
        "check-box-5",
        "text-11",
        "text-12",
        "button-5"
      ]
    },
    {
      "id": "list",
      "component": "List",
      "divider": true,
      "children": [
        "list-item",
        "list-item-2",
        "list-item-3",
        "list-item-4",
        "list-item-5"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "list"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    }
  ]
}