# Build a custom component

URL: /code/build-a-custom-component · Id: `page:code/build-a-custom-component`

> Add a Component of your own, with its props, its web rendering and its Markdown rendering for agents, and use it on a Page or a view.

To build a custom [Component](/business/nouns/component), write its definition, its web rendering, and use it by name. Leaseline declares a `Lease` [Noun](/business/nouns/noun) and shows each one's countdown to renewal.

## Prerequisites
- A [Startup](/business/nouns/startup) with a [Site](/business/nouns/site) or an [App](/business/nouns/app), such as Leaseline after [mounting the App](/code/learn/mounting-the-app).

## Steps
1. To declare the Component, write its props and renderers:

   ```mdx title="components/RenewalCountdown.mdx"
   ---
   props:
     lease: { type: Lease, required: true }
   renderers: [web, markdown]
   ---
   ```

2. To draw it for people, compose its web rendering from `startup-builder/ui`:

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

   export default function RenewalCountdown({ lease }: { lease: Lease }) {
     const days = Math.ceil((Date.parse(lease.endsOn) - Date.now()) / 86_400_000)
     return (
       <section>
         <h3>{lease.unit}: {days} days to renewal</h3>
         <StateBadge thing={lease.$id} />
         <Timeline thing={lease.$id} />
       </section>
     )
   }
   ```

3. To use it, name it in a view or a [Page](/business/nouns/page): `<RenewalCountdown lease="lease_4loEed1JG4" />`.

## Result
The Component renders as HTML for people and as Markdown for agents, from one definition. Its props are typed by the Noun, so a wrong field fails the build.

## Next steps
- [Components](/code/file-conventions/components): the full contract.
- [Renderers](/code/views/renderers): how one view draws for each reader.