---
title: component
description: An instance of a named component declared under `components` — the reference, with props, to a reusable subtree.
status: shipped
url: https://getairframe.com/framewerk/reference/nodes/component
---

> Part of the Framewerk docs. Index of every page: /framewerk/llms.txt

# `component`

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

## Example

**component**

```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"
            }
          }
        ]
      }
    }
  ]
}
```

## 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.