An instance of a named component declared under `components` — the reference, with props, to a reusable subtree.

`component`

An instance of a named component declared under components — the reference, with props, to a reusable subtree.

Example

component

phone

SPEC.JSON

{
  "formatVersion": "1.0",
  "components": {
    "stat-card": {
      "summary": "One KPI with its label and value.",
      "props": {
        "title": {
          "type": "string"
        },
        "value": {
          "type": "string"
        }
      },
      "layout": {
        "_id": "sr",
        "type": "column",
        "gap": 4,
        "children": [
          {
            "_id": "st",
            "type": "text",
            "variant": "caption",
            "content": "{{title}}"
          },
          {
            "_id": "sv",
            "type": "text",
            "variant": "heading",
            "content": "{{value}}"
          }
        ]
      }
    }
  },
  "screens": [
    {
      "id": "dash",
      "layout": {
        "_id": "root",
        "type": "column",
        "gap": 12,
        "padding": 16,
        "children": [
          {
            "_id": "k",
            "type": "component",
            "ref": "stat-card",
            "props": {
              "title": "Revenue",
              "value": "$12,400"
            }
          }
        ]
      }
    }
  ]
}

RENDERED OUTPUTFRAMEWERK RENDERER

Revenue

$12,400

States

Prop values, instance layout overrides, nodeOverrides, projected slots. Common to every node: hover / press / focus CSS bags, showWhen / hideWhen, animate.

Stability

This node type is part of the format contract: adding an optional prop is additive; removing the node or narrowing an existing prop is breaking. Prop tables are generated from the schema; this page carries the prose.

component

component

Example

States

Stability

On this page

`component`