---
title: "RUAL Components · RUAL Documentation"
description: "The component set that ships with RUAL and the props each one takes."
canonical: https://docs.rual.nl/interfaces/rual-components
language: en
---

# RUAL Components

Building custom components in RUAL Studio offers an excellent opportunity to maximize the potential of React and RUAL together. However, there may be instances where you wish to integrate existing components within RUAL alongside your own creations.

### Our Default Components

By default, we offer [an extensive selection of components](https://docs.rual.nl/block-types/state%20ui) within blueprinting. These standard blocks are React-based functional components, tailored to provide the RUAL developer with a wide array of functionalities seamlessly integrated into [blueprinting](https://docs.rual.nl/blueprints/introduction).

On this page, we will discuss and demonstrate how you can incorporate these existing components within your custom components. Additionally, we will present a list of commonly used components along with their names.

### `UID` in components

Most, reactive, components need their own unique identifier. This way, they can listen for changes in the global state or handle other RUAL based events. When injecting RUAL Components into your Custom Components, you'll need to extract the `uid` from the params. You can easily do this by prefixen the params with `uid,`. You'll need to make sure that each `uid` for each RUAL Component is unique, you can do this by prefixen them with an unique identifier in combination with the existing uid.

### Using Translations

A frequently requested feature, which we also employ in our own blocks, is the translation component. This component enables you to request translations and incorporate HTML content into them. Additionally, we provide access to the [translate](https://docs.rual.nl/interfaces/rual-library#list-of-functions) function for integration within JavaScript/React.

```
import { Translate } from './translate_key.jsx';

export default function CustomExampleTranslate (props) {
  return (
    <div>
      <Translate bp_translate_key="key_to_translate" />
    </div>
  );
}
```

### Using Inputs

Our input components are seamlessly integrated with the global state through the use of state get/set key blocks in blueprinting. While constructing your own inputs is certainly feasible, it's often unnecessary. Below is an example showcasing how to utilize our pre-existing input component.

```
import { TextInput } from './input.jsx';

export default function CustomExampleInput ({ uid, onenter }) {
  return (
    <div>
      <TextInput uid={'input_' + uid} bp_field="form.name" onenter={onenter} />
    </div>
  );
}
```

### List of Commonly Used Components

Below is a compilation of RUAL Components that are commonly utilized within Custom React Components. Nearly all of these components accommodate the default parameters: `uiclass`, `uistyle`, and `uiattributes`. Regarding the `children` parameter, it indicates that the component supports React Children logic, which means other components should be nested within the tags of this component. The full props contract lives in the [Component Props Reference](https://docs.rual.nl/reference/component-props-reference).

| Category | filename | params |
| --- | --- | --- |
| Inputs | `input.jsx` | uid, bp_field, type, onenter |
| `input_file.jsx` | uid, bp_action_guid, bp_field, type, onenter |  |
| `input_price.jsx` | uid, bp_field, disabled |  |
| `input_date.jsx` | uid, bp_field |  |
| `input_checkbox.jsx` | uid, bp_field, value |  |
| Buttons | `button.jsx` | value, icon, iconclass, iconstyle, type, inpinfunction |
| `button_content.jsx` | children, icon, iconclass, iconstyle, type, inpinfunction |  |
| Content | `translate_key.jsx` | bp_translate_key, language |

### Styling Components

Accept the `uiclass`, `uistyle`, and `uiattributes` props and apply them to your component's root element. That is the contract that lets blueprint authors style instances from the canvas without touching your code. Keep everything inside the root on your own classes. The full contract, per-component props, and data-fetching patterns are in the [Component Props Reference](https://docs.rual.nl/reference/component-props-reference) and [RUAL Library](https://docs.rual.nl/interfaces/rual-library).