---
title: "Component Props Reference · RUAL Documentation"
description: "Props, types and defaults for the built-in components."
canonical: https://docs.rual.nl/reference/component-props-reference
language: en
---

# Component Props Reference

The props every RUAL component understands: uid, uiclass, uistyle, uiattributes, children, plus per-component specifics.

Custom React components mounted in RUAL pages receive a standard set of props from the platform, plus the data you wire in yourself. This is the complete contract. Component setup itself: [RUAL Components](https://docs.rual.nl/interfaces/rual-components).

### Universal Props (Every Component)

| Prop | Type | Purpose |
| --- | --- | --- |
| `uid` | string | Unique instance id. Required and must be stable per instance: used for state, keys, and identity. |
| `children` | node | Nested content placed by the blueprint (nested state elements). |
| `uiclass` | string | CSS classes applied to the component root. The styling hook from the blueprint. |
| `uistyle` | string | Inline style string applied to the component root. |
| `uiattributes` | string | Extra HTML attributes (e.g. `data-*`, `aria-*`) applied to the root. |

### Per-Component Props

| Component | Props |
| --- | --- |
| `useTranslate` | `translation_key`: key to look up in cluster translations |
| `useInput` | `field`. The form field name it binds to |
| Iterate contexts (datatables) | `uid`, `index`, `columns`, `row`: per-row data for custom cells |

### Styling Guide

- **Default path**: accept `uiclass`/`uistyle`/`uiattributes` and spread them on your root element: blueprint authors then style instances from the canvas without touching your code.

- **Keep internals your own**: root-level props are the public API; style everything inside with your component's own classes.

- **Respect the platform shell**: pages render inside the cluster's UI: inherit fonts and avoid global resets in component CSS.

### Getting Data In

- Wire blueprint values into the component's pins (params appear as props). See [Components](https://docs.rual.nl/interfaces/components).

- Fetch cluster data client-side through the RUAL library (`window.RUAL`). See [RUAL Library](https://docs.rual.nl/interfaces/rual-library).

- For lists (datatables), read `columns`/`row` in iterate contexts. See [Handle Iterations](https://docs.rual.nl/interfaces/iterations).

### Next Steps