# Component code

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

> Component code is a Component’s web rendering, composed from the kernel components, beside the file that types its props.

[Component](/business/nouns/component) code is a Component’s web rendering, composed from the kernel components, beside the file that types its props.

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

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

```tsx title="components/CloseProgress.tsx"
import { StateBadge, Timeline } from 'startup-builder/ui'

export default function CloseProgress({ close }: { close: Close }) {
  return (
    <section>
      <h3>{close.period}{close.balanced ? ': balanced' : ''}</h3>
      <StateBadge thing={close.$id} />
      <Timeline thing={close.$id} />
    </section>
  )
}
```

### Exports
| Export | Kind | Type |
| --- | --- | --- |
| `default` | default | `(props: Props) => JSX.Element` |

### Signature
```ts
(props: Props) => JSX.Element
```

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

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