# Component definition

URL: /code/project-structure/component-definition · Id: `convention:component-definition`

> A Component definition declares one Component, its typed props, and its renderings, shared by every Site and App in the Studio.

A [Component](/business/nouns/component) definition declares one Component, its typed props, and its renderings, shared by every [Site](/business/nouns/site) and [App](/business/nouns/app) in the [Studio](/business/nouns/studio).

| Property | Value |
| --- | --- |
| Path | `components/[Name].mdx` |
| Holds | [Component](/business/nouns/component) |
| Kind | file |
| Leaders | db-first, git-first |
| Team | [Product Team](/agents/product) |
| Written by | [Change.merge](/business/nouns/change/merge) |
| Compiled by | [SiteBuilder](/code/builders/site) |

### Example
`components/CloseProgress.mdx` in a Startup repository. Closewise, a sample business, declares a `Close` Noun.

```mdx title="components/CloseProgress.mdx"
---
props:
  close: { type: Close, required: true }
renderers: [web, markdown]
---
Shows how far one month's close has come: reconciled, reviewed, closed.
```

### Props
The frontmatter keys the file takes. The body is its prose.

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `props` | `json` | Yes | Each prop with its `type`, a scalar or a Noun name, and whether it is `required`. |
| `renderers` | `string[]` | No | The renderings it ships: `web`, `native` and `markdown`. |

### Generates
[SiteBuilder](/code/builders/site) compiles it into these records, Verbs and routes.

| Kind | What |
| --- | --- |
| Records | [Component](/business/nouns/component) |
| Verbs | None. |
| Routes | None. |