# Using Smart UI Components

All the components are basically empty, they don't contain any of the code required to operate. Instead, the addons are the way to communicate with the framework. If you simply add a behavior to your object without adding the SmartUI plugin, it will fail to run because it coudln't find the libraries required.

{% hint style="warning" %}
By desing, you can <mark style="color:orange;">**only add one SmartUI component behavior**</mark> to your objects.
{% endhint %}

## Adding a Behavior

<div><figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FO6IlYde5kN1MXg886BrI%2Fp4.png?alt=media&#x26;token=c4159749-216d-431f-972e-5bea59fcc1fb" alt=""><figcaption><p>Step 1. Select any World object</p></figcaption></figure> <figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2FxuQkTgVOOqRGA37vyVzK%2Fp5.png?alt=media&#x26;token=d822c8ef-db1b-4c46-8582-9c0cd7223b3e" alt=""><figcaption><p>Step 2.Add a SmartUI behavior</p></figcaption></figure> <figure><img src="https://3242409510-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9bZkqK9vYvPkvVDUO4Tp%2Fuploads%2F7ddt3OTQTdqrwPew86sP%2Fp6.png?alt=media&#x26;token=a996cbdc-9166-4abd-b7c3-a78e965db079" alt="" width="563"><figcaption><p>Step 3.The Behavior properties will appear when selecting the object.</p></figcaption></figure></div>

## Main Features

All the SmartUI components are children of the same line of inheritance, therefore, many properties and capabilities are common.&#x20;

{% hint style="success" %}
These properties can be accessed also through ACE's, either to pick them or the change them, giving you a higher level of flexibility to customize them.
{% endhint %}

<table><thead><tr><th width="256">Property</th><th>Description</th></tr></thead><tbody><tr><td>Enabled</td><td>Enables or disables the component. For components that hold a value, it can still be set, but the animations and event triggers won't be called.</td></tr><tr><td>Index</td><td>Is an integer number that influences the document flow navigation priorities. See <a data-mention href="document-flow">document-flow</a><br><span data-gb-custom-inline data-tag="emoji" data-code="26a0">⚠️</span><mark style="color:orange;">Only available for focusable components.</mark></td></tr><tr><td>Invisible Component</td><td>Allows interactions and animations for the component, even if the visibility is turned to invisible. Opacity has no effect on this evaluation.<br><span data-gb-custom-inline data-tag="emoji" data-code="26a0">⚠️</span> <mark style="color:orange;">Only available for focusable components.</mark></td></tr><tr><td>Automatic color</td><td><p>Changes the tinting of the object to provide a visual aid when focusing. The color can't be changed, this feature is meant to provide a quick visual aid. It's recommended to be off when releasing your project.</p><p><span data-gb-custom-inline data-tag="emoji" data-code="2139">ℹ️</span> <mark style="color:blue;">It's recommended to uncheck this property on your final export, to keep the tint of the object unchanged.</mark></p></td></tr><tr><td>Component's Name</td><td>The name for the component. It doesn't have to be unique in general, but if you are using composite components like Scrollbars or Dialogs, the name must be unique.</td></tr></tbody></table>
