> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> UI and process components.

# Components

Components are the executable parts of your app. Each component has a `type` that determines how it runs.

## UI components

A UI component is a web frontend — React, Vue, Svelte, plain HTML, or any framework that serves on a port.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: { command: 'bun run dev' } } }
```

* **Max 1 per app** — Kazzle assigns a single preview URL per app
* `runtime.dev.command` — command for the dev server (used by "Start preview")
* `runtime.prod.build` — command to build the production image
* `runtime.prod.command` — command to start a production process component

If `runtime.dev.command` is not set, the preview system runs `bun run dev` from your `package.json`.

## Process components

A process component is a backend service, worker, or scheduled task.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'API', type: 'process', path: './server/index.ts' }
```

### Lifecycle: `processMode`

A process component has one of two lifecycles:

* `processMode: 'persistent'` (default) — long-running HTTP server. Triggers are POSTed into the running server at the declared `path`.
* `processMode: 'triggered'` — the entry script is spawned per trigger and exits. No idle machines on production.

### Triggers

Schedule and webhook triggers are declared on the component. One component can carry many triggers. Each trigger has a `name` (unique within the component) and a `kind`.

```typescript theme={"theme":"material-theme-darker"}
{
  name: 'events',
  type: 'process',
  path: './components/events/index.ts',
  processMode: 'persistent',
  triggers: [
    { name: 'cleanup', kind: 'schedule', schedule: '0 * * * *', path: '/cron/cleanup' },
    { name: 'stripe',  kind: 'webhook',                          path: '/webhook/stripe' },
  ],
}
```

`path` is required for `processMode: 'persistent'`. For `processMode: 'triggered'` it's omitted — the script reads `TRIGGER_NAME` from the environment instead.

See [Automations](/work/automations) for the full trigger model, env-var contract, and HTTP authentication header.

## Runtime commands

| Phase                  | When it runs         | Example                                |
| ---------------------- | -------------------- | -------------------------------------- |
| `runtime.dev.command`  | During draft preview | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | In production        | `bun run start`, `node dist/server.js` |

Draft preview package scripts can use `kazzle run -- <command>` so Kazzle can inject local ports and sibling component URLs. Production process components must declare the real command in `runtime.prod.command` because deploy runs that command in the production image.