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

# Custom components

> Build typed host components that receive validated props, resolved options, and mediated capabilities.

Custom implementations receive `TypedRenderComponentProps<Props>`. The model
cannot supply a component implementation, import, event handler, or arbitrary
React child.

```tsx theme={null}
function WeatherCard({
  props,
  options,
}: TypedRenderComponentProps<WeatherProps>) {
  return (
    <article lang={options.locale}>
      <h3>{props.location}</h3>
      <data value={props.temperature}>{props.temperature} C</data>
    </article>
  );
}
```

## Available capabilities

| Prop           | Meaning                                                        |
| -------------- | -------------------------------------------------------------- |
| `props`        | Schema-validated, read-only component properties               |
| `children`     | Validated child nodes allowed by the child contract            |
| `nodeId`       | Stable source node identifier                                  |
| `options`      | Frozen resolved theme, locale, currency, time zone, and policy |
| `emit`         | Request a registered action                                    |
| `navigate`     | Request host-mediated navigation, when configured              |
| `isUrlAllowed` | Check the renderer URL policy                                  |
| `imagePolicy`  | Optional host image policy                                     |
| `mode`         | `preview` or `committed` rendering context                     |

Custom components remain disabled in provisional source previews. They render
only from validated authoritative state. Still treat their props as untrusted
data: escape text normally, avoid `dangerouslySetInnerHTML`, do not construct
code, and do not initiate effects while rendering.

Use `actionProps` in `defineComponent` only for schema properties that contain
registered action names. Use `children: { min, max }` to constrain composition.
Keep browser/network behavior behind explicit host callbacks rather than hidden
inside a visual component.