{
  "data": {
    "meta": {
      "adoptsFrom": {
        "name": "ComponentListing",
        "module": "@cardstack/catalog/catalog-app/listing/listing"
      }
    },
    "type": "card",
    "attributes": {
      "name": "Stepper UI",
      "summary": "The Stepper component provides a multi-step flow shell for first-run wizards, onboarding journeys, and setup checklists — a guideline book that walks the user through what to fill in, in what order, before they start using an app. It renders a vertical step rail (numbered dots, checkmark done states, active ring, connector lines) beside the active step's content pane, closed out by a Back / Skip / Next action bar built from boxel-ui Button. The host supplies step definitions and per-step content through named blocks while the component owns the step state machine: gating Next on per-step isComplete wired to host state, MUI-style optional steps that surface a Skip button, onStepChange enter hooks for lazy loading, and optional rail click-to-jump. It supports an inline bordered-card mode and a modal mode (scrim plus centered card) for first-run experiences, a header with kicker, title, and an outlined-circle close button, and a fully replaceable actions block. Theming is driven by the linked theme: every color, font, and radius resolves --stepper-* override knob, then theme semantic token (the --primary / --primary-foreground pair drives the accent fills, their on-fill content, and the Next button), then neutral Boxel-token defaults — link a Theme card or Brand Guide and the whole stepper restyles with no stepper-specific work.",
      "cardInfo": {
        "name": "Stepper UI",
        "notes": null,
        "summary": null,
        "cardThumbnailURL": null
      }
    },
    "relationships": {
      "skills": {
        "links": {
          "self": null
        }
      },
      "tags.0": {
        "links": {
          "self": "../../Tag/card"
        }
      },
      "license": {
        "links": {
          "self": null
        }
      },
      "specs.0": {
        "links": {
          "self": "../Spec/stepper"
        }
      },
      "specs.1": {
        "links": {
          "self": "../Spec/stepper-playground-example"
        }
      },
      "specs.2": {
        "links": {
          "self": "../../Spec/code-snippet"
        }
      },
      "images.0": {
        "links": {
          "self": "../Screenshots/c76678a0-a2ee-4142-a3d7-a9f537df7c52-d5ab6927.png"
        }
      },
      "publisher": {
        "links": {
          "self": null
        }
      },
      "examples.0": {
        "links": {
          "self": "../example/StepperPlayground/c76678a0-a2ee-4142-a3d7-a9f537df7c52"
        }
      },
      "categories.0": {
        "links": {
          "self": "../../Category/ui-components-design"
        }
      },
      "cardInfo.theme": {
        "links": {
          "self": null
        }
      },
      "cardInfo.cardThumbnail": {
        "links": {
          "self": "../Screenshots/c76678a0-a2ee-4142-a3d7-a9f537df7c52-d5ab6927.png"
        }
      }
    }
  }
}