# Uibuilder: Component Design + Example Components

**URL:** <https://discourse.nodered.org/t/uibuilder-component-design-example-components/32293>\
**Category:** Developing Nodes\
**Tags:** uibuilder\
**Created:** [1 September 2020 10:12 UTC](https://discourse.nodered.org/t/uibuilder-component-design-example-components/32293 "2020-09-01T10:12:56Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [20 September 2020 01:17 UTC](https://discourse.nodered.org/t/uibuilder-component-design-example-components/32293/10 "2020-09-20T01:17:44Z")

</div>

Another update pushed.

See the examples for the gauge component - you will see the first examples of pushing data direct to the component so that you don't have to do anything in your HTML (eventually not in your js either as this will be folded into the uibuilderfe library).

All you need to do is set an ID on each component instance and then send the right data format through to the front-end.

The HTML can be as simple as:

```auto
<gauge ref="gauge1" />

```

> **[TotallyInformation/uibuilder-vuejs-component-extras](https://github.com/TotallyInformation/uibuilder-vuejs-component-extras/tree/master/gauge/examples/http-vue-loader)**
>
> A set of extra VueJS components designed to work with node-red-contrib-uibuilder though they should also work with other VueJS installations. - TotallyInformation/uibuilder-vuejs-component-extras

---

_[View the full topic](https://discourse.nodered.org/t/uibuilder-component-design-example-components/32293)._