# \[Announce\] node-red-contrib-component-dashboard v1 beta

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-component-dashboard-v1-beta/28748>\
**Category:** Share Your Nodes\
**Created:** [22 June 2020 18:35 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-component-dashboard-v1-beta/28748 "2020-06-22T18:35:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cinhcet](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cinhcet/32/438_2.png) [@cinhcet](https://discourse.nodered.org/u/cinhcet)\
**Post date:** [22 June 2020 18:35 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-component-dashboard-v1-beta/28748/1 "2020-06-22T18:35:29Z")

</div>

Hi,

I have published a beta version of node-red-contrib-component-dashboard to npm.

> **[cinhcet/node-red-contrib-component-dashboard](https://github.com/cinhcet/node-red-contrib-component-dashboard)**
>
> Flexible dashboard for Node-RED based on web-components - cinhcet/node-red-contrib-component-dashboard

 ![dashboard](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/464d3a35cfe3c810ef88e179dbf45427af99dd39.png)

To install and get an example running:

- `npm install node-red-contrib-component-dashboard@beta`, restart Node-RED
- Then go to your user directory of your Node-RED install, e.g. `~/.node-red`, and then to `~/.node-red/node_modules/node-red-contrib-component-dashboard/templates/exampleDashboard_1`. From here, import `flows.json` into Node-RED, deploy.
- Then copy the rest of this folder (`index.html`, `style.css`, `widgets.js`) into `~/.node-red/yad/yad`. (replace the stuff that is already there)
- Inside `~/.node-red/yad/yad` run `node bundle.js`. This takes a while the first time.
- open your dashboard, e.g. `http://127.0.0.1:1880/yad`
- enjoy 🙂

It now supports a masonry style layout and supports all icons from [https://iconify.design/icon-sets/](https://iconify.design/icon-sets/)

Caveat: You have to write html/css to design your dashboard and this is still a beta release

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 August 2020 18:35 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-component-dashboard-v1-beta/28748/2 "2020-08-21T18:35:39Z")

</div>

This topic was automatically closed after 60 days. New replies are no longer allowed.