> For the complete documentation index, see [llms.txt](https://docs.aitheon.com/creators-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aitheon.com/creators-studio/new-component-creation-tutorial/component-styling-guide.md).

# Component Styling Guide

When publishing your new component to Marketplace, it's essential to customize the appearance properly. 

If the appearance does not meet the requirements, a Marketplace moderator will not approve the publication.

## Component Category

You may add your new component to an existing category, but it may confuse users. So it's better to take as a rule:

* to consider each new project as a new category (and label it respectively);
* to put related components to one project (and category);
* to create a new project (and category) for components that provide other purposes.

## Background Color

The component category defines its' color on the palette. 

When you create a new category component you should set up its workspace color properly. 

The main idea is that your component in the workspace should reflect its purpose. If the component works as a **function** it should have **#8c58e9** hex code color. 

If a component creates a dashboard widget - it must be **#1ac0c9** (like **dashboard** category elements).

![](https://lh5.googleusercontent.com/evw14_u5D7F5Fods9lvhGt9ALYYtIXnxrmsUap_8-2-AEDG68Uu5xon5Am0iiDzNK58pLsRta1ymVqnk0TcGGpGC1zdZwvh60Jjta9Iz4NGcBvkf3byvPfcvzr1NqGwVOpUZkd76)

In this instance, we create a **converters** category for a new component (in its definitions). And this category will contain a “function-like” colored component.

Use these colors:<br>

| Component\`s Category | Hex Code |
| --------------------- | -------- |
| common                | #        |
| dashboard             | #1ac0c9  |
| storage               | #589be9  |
| parser                | #21c144  |
| sequence              | #ca58e9  |
| network               | #ed9438  |
| function              | #8c58e9  |

If you make a category that doesn\`t refer to any of these core categories, please use non-confusing colors for components.&#x20;

## Font Awesome Icons

An icon on the component reflects its functionality.

You can use [Font Awesome](https://fontawesome.com/v4.7.0/icons/) icons in the form **`font-awesome/fa-address-card`**, where **`address-card`** is the icon name.&#x20;

![](https://lh5.googleusercontent.com/SA0U6UopMPmNW6PNNfuocOEIeaH0p-Qbmzr-XSYTfvgWz4BWbnuplmGmh6YQdQINHZvqEtYGYv1b4o6x9-8JZ21Ja3ddWg5dCqdiTfDAqeipgSndiP7auEeMrfef0u-uwcqm2ojD)

Font Awesome icons look this way:

![](https://lh4.googleusercontent.com/mcjkUcbZeQ0TGUURmW-5qWnLRlg0LFfCYzaFYxvwjcamJ9y_8FY73lsa8_vJmTezqDrVh6i7_qUX8mosDBZdCCO-mNcGocoq02miYy3ua00LEKLcP41aFwqzc6y2R09w2G1gUaNq)

## Custom Icon

If you want to use a custom icon, it must be on a transparent background, with 20x30 size in **.png** format.&#x20;

![](https://lh6.googleusercontent.com/x8p2L0Yk6CJEKcMojHmMDoaxUSwpg6cQRciR-cu3dmJWbpO0IfbC3PFgle3LTUO9ty93CrmQ152RwOc3tMb86aW-1MAigjkmgv3j5c-0QGP6xr-wPjITAYdvWikLJvQ90TCx9l-x)

Place an icon file to a directory called **icons** alongside component\`s **.js** and **.html** files.

These directories get added to the search path when the editor looks for a given icon filename. Because of this, the icon filename must be unique.

## Component Label

When specifying the component’s label (name in the workspace), consider its potential users\` convenience. Let it reflect the component\`s function or purpose. And keep it short.

The label value can be a string or a function.

A string value will be used as the workspace name. If the value is a function, it shows a label you put in it by default but will switch to the name a user places in the **Name** property.

![](https://lh4.googleusercontent.com/pqqb5VuyL60fMLOSU8r8xoF9VIHa-5MBvbSQjWgxp5w452dXOxhZnp51Y5X6bjWL6ia7hKR3uaOKttP5vTiI55NzRAn_bZ7gO26eETCN4VLzeHrrfW2eB7U_48Ywp-loGomel5-i)

Insufficient naming: **test component**, **function1**, **dsfdsgfas**, **the primary process\` silent observer**.

Sufficient naming: **uppercase**, **convert**, **duplicate**, **form filler**.

## Palette Label

By default, the component’s type is used as its label within the palette. To override this you can use **`paletteLabel`** property.

As with **`label`**, this property can be either a string or a function. If it is a function, it is evaluated once when the node is added to the palette.

![](https://lh4.googleusercontent.com/j21Ny8RWQ8eqtQlLP5yULHmJby8CknkN_mPmiWuTHidDSWisB--yK2azc7q8b4ljgnTr6t0K4SvKDWSWgOYuhjOKi49FJhshMK2ztQRYLiXQCK8RoTSHFUGEOI5jcYSSlIC4lt19)

## Label style

The workspace label style can be set dynamically. Use the **`labelStyle`** property. It identifies the CSS class to apply. There are two predefined classes: **`node_label`** (default) and **`node_label_italic`**.

In this example, we apply the italic style to a component\`s name if it is set.

![](https://lh5.googleusercontent.com/PWJhvhuuVkhZAqPl_DQXvrxQMVrohUnDeSVz3ZLSsBVTGiHYfgK6Gwm9umCzq7V02x383ltS7bLRM_3LXaD6vB3U7Ftt1BiMxG_HnXY9KXTEzvyGMa7sLnTsvWoX3cRkg8sljS1W)

## Alignment

Icons and labels are left-aligned by default. But the convention is to make them right-aligned for the end-flow components (for example, **mqtt out** in the **network** category or **gauge** in the **dashboard** one)

You can do it with the **`align`** property of a component definition.

![](https://lh6.googleusercontent.com/GTag1qcnEtZNW0Sxtl7tjqESe4mPolZDJmddhuXwhzzqMZA1WOOTCStHAh_7VewulOM38YZp8kCV0gcebaZA06WULVDWrFo0zvIkSc12OqJAGxrqdGF5w8vfW404G-CT1879FNgz)

Appearance in the workspace:

![](https://lh4.googleusercontent.com/aqdWUHfxccLmTbzNis0RTzpZNu5Jm4hIbuvc_EDdX_jt7vb1rdjv7Y6ofHHhZE0EH6P3excwYokNBjBUMMnTkdYa9Qh6PsJ6VpQpJNGhP2cjhG21HRSzNVNFBEbfPxfJ30QqWfGz)

## Port labels

You can set labels on the component\`s ports. They appear when hovering over.

![](https://lh4.googleusercontent.com/zt5koAy362a_WsZkeXivdpv55OiEr3907WMn-wG1lP3HDn8r7e1FlPamHYuC-ZUrBMUd5Yw4nKIcy6X6aN6jIf-P4QN4-DLms4hB9kYsrPQB7lfQdImS6xhg2xRyLGfrD5lOxB5h)

A user can change the labels in the **Appearance** properties of the component.

Appearance in the workspace:

![](https://lh4.googleusercontent.com/RBzdPcSeAb2pNTYLs1JCj0sxdWVZlGLjweH15DPYhWg95cfqbKHioUwCB1ebosGRU2MG7RgDo94qQitREryiT9C_L4BFD65c29QdrraVJi7X7LGPbtSfcT4akftip3-DKpf6nie8)

## Widget styling

There are no strict rules for the UI component representation (the **dashboard** category).&#x20;

The main idea is to make it simple and minimalistic. A user can change the appearance but pay attention to the default view.   &#x20;

Consider these two examples, less and more handy:

![](https://lh5.googleusercontent.com/Q3k5k68uT5-yDpDPVgBqYbP_mgwD0F6K8U9qA0sSbXjfzkrg8Ezy-ZY2uLK_dkzPVno2DE46aDXhY6XRFMU6r1NN-At0RUiDeUfU9POBHFdj8Bgz2-8rkGVsjYj88B8ltJi8LwQv)

&#x20;and

![](https://lh6.googleusercontent.com/6nMyt9kZkmyYxsuYqy30g0HcVrKpNOrwRh3fXNhRGdhxvBAk4k2adwc54n7Wsjm5Fg9XF2QrtEHr2Q-nUyBb9RENgWnJEJM1-pRQ3nKiZKmGcAONdh79Gr_L1XTb8oEtRxqU2-d4)

Don\`t forget about headers, default colors, placeholders, etc. To sell your component on **Marketplace**, you may want to make its appearance clear and compelling.