---
title: shape
description: A parametric primitive — rectangle, circle, pill, or eight generated forms like star and ring — drawn from its own numbers, not an image.
status: shipped
url: https://getairframe.com/framewerk/reference/nodes/shape
---

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

# `shape`

A parametric primitive — rectangle, circle, pill, or eight generated forms like star and ring — drawn from its own numbers, not an image.

## Example

**shape**

```json
{
  "id": "home",
  "layout": {
    "_id": "root",
    "type": "row",
    "gap": 16,
    "padding": 16,
    "children": [
      {
        "_id": "c",
        "type": "shape",
        "variant": "circle",
        "width": 40,
        "height": 40,
        "background": "var(--accent)"
      },
      {
        "_id": "s",
        "type": "shape",
        "variant": "star",
        "points": 5,
        "inset": 0.45,
        "width": 40,
        "height": 40,
        "background": "var(--accent)"
      }
    ]
  }
}
```

## States

Variant-specific params (`points`, `progress`, …), clamped and warned when out of range. 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.