# Component

URL: /business/nouns/component · Id: `noun:component`

> A Component is a named block of a Page, such as a hero, a pricing table, or a form, filled from records through typed props.

A Component is a named block of a [Page](/business/nouns/page), such as a hero, a pricing table, or a form, filled from records through typed props.

## Properties
| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `name` | `string` | Yes | The name a Template places it by, such as `Pricing`. |
| `props` | `json` | Yes | The schema of the props it accepts. |
| `region` | `string` | No | Where it sits: `header`, `section`, `footer`, or `notice`. |
| `interactive` | `boolean` | No | True when it runs code in the browser; it still renders a static still without it. |

## Object
```json
{
  "$id": "https://api.sb/patentpad.com/components/component_1",
  "$type": "Component",
  "name": "PatentPad",
  "props": {},
  "region": "header",
  "interactive": true
}
```

## Relationships
- <a id="rel-placed-by"></a>A Component **is placed by** many [Templates](/business/nouns/template): a [Template](/business/nouns/template) places named Components, such as `Pricing`, and fills their props from records. `placedBy`, inverse [`places`](/business/nouns/template#rel-places).
- <a id="rel-used-on"></a>A Component **is used on** many [Pages](/business/nouns/page): a [Page](/business/nouns/page) is assembled from Components, each filled from records. `usedOn`, inverse [`uses`](/business/nouns/page#rel-uses).

## Verbs
| Verb | Description | Subject | Event | Class |
| --- | --- | --- | --- | --- |
| <a id="create"></a>[Component.create](/business/nouns/component/create) | Creates a Component. Inherited from [Noun](/business/nouns/noun). | None. | `Component.created` | Two-way: `try`, `send`, `do` |
| <a id="get"></a>[Component.get](/business/nouns/component/get) | Returns one Component by id. Inherited from [Noun](/business/nouns/noun). | None. | None. | Read: `try`, `do` |
| <a id="list"></a>[Component.list](/business/nouns/component/list) | Returns Components, newest first, one page at a time. Inherited from [Noun](/business/nouns/noun). | None. | None. | Read: `try`, `do` |
| <a id="update"></a>[Component.update](/business/nouns/component/update) | Changes the given properties of a Component. Inherited from [Noun](/business/nouns/noun). | None. | `Component.updated` | Two-way: `try`, `send`, `do` |
| <a id="delete"></a>[Component.delete](/business/nouns/component/delete) | Deletes a Component; its history is kept. Inherited from [Noun](/business/nouns/noun). | None. | `Component.deleted` | One-way: `send`, `do` |

## Permissions
Which Access level may call each Verb. One-way Verbs wait their delay window.

| Operation | `owner` | `admin` | `member` | `viewer` |
| --- | --- | --- | --- | --- |
| `Component.create` | Yes | Yes | Yes | No |
| `Component.get` | Yes | Yes | Yes | Yes |
| `Component.list` | Yes | Yes | Yes | Yes |
| `Component.update` | Yes | Yes | Yes | No |
| `Component.delete` | Yes | Yes | Yes | No |

## Call it

**Ask**

```text
Add a component to ShiftNote.
```

**API**

```bash
curl -X POST https://api.sb/shiftnote.app/components \
  -H "Authorization: Bearer $STARTUP_BUILDER_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"name":"ShiftNote","props":{}}'
```

```json
{
  "api": "https://api.sb/shiftnote.app",
  "component": {
    "$id": "https://api.sb/shiftnote.app/components/component_1",
    "$type": "Component",
    "name": "ShiftNote",
    "props": {}
  },
  "action": {
    "$id": "https://api.sb/shiftnote.app/actions/action_1",
    "operation": "Component.create",
    "status": "done"
  },
  "links": {
    "self": "https://api.sb/shiftnote.app/actions/action_1"
  }
}
```

**SDK**

```ts
import { $ } from 'startup-builder'

const component = await $.Component.create({ name: 'ShiftNote', props: {} })
```

**CLI**

```bash
npx startup-builder do Component.create --json '{"name":"ShiftNote","props":{}}'
```

**MCP**

```json
{
  "name": "do",
  "arguments": {
    "code": "return await $.Component.create({ name: 'ShiftNote', props: {} })"
  }
}
```

## Example
The pricing [Page](/business/nouns/page) of a scheduling [SaaS](/products/templates/saas) places a `Pricing` Component in its main region, fed by the published [Offers](/business/nouns/offer). Publishing a $29 team Offer adds a column on every Page that uses the Component.