# Render prop

Lets Candor's Radix-based primitives also take Base UI's `render` prop.

- Registry name: `render-prop` (`@candor/render-prop`)
- Tier: Free (MIT). No licence key needed.
- Docs: https://candor.themethodic.com/docs/render-prop

## Install

```bash
npx candor-ui add render-prop
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/render-prop`.

## Functions

### withRender

```ts
withRender({ render, nativeButton: _nativeButton, ...props }: P & RenderProp)
```

## Types

### RenderProp

Lets Candor's Radix-based primitives also take Base UI's `render` prop. In projects on a Base UI style (shadcn's `base-*` styles), the shadcn CLI rewrites `<Trigger asChild><button/></Trigger>` into `<Trigger render={<button/>}>`; this turns that back into Radix's asChild, so Candor works in either kind of project.

```ts
{ /** Base UI's way to render as another element; the same as `asChild` with that element as the child. */ render?: React.ReactElement | undefined /** Base UI's flag for a button rendered as another element; shadcn adds it with `render`. Radix doesn't need it. */ nativeButton?: boolean | undefined }
```

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider` (fixed strings) and `TermsProvider` (nouns); entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.