How to Use ShadCN Components in Node-RED Template Node?

General
,
1

I want to use ShadCN components inside a Node-RED template node. Since ShadCN is built for React, I am unsure how to integrate it within the Vue-based Node-RED UI or the standard template node.

Is there a way to import and use ShadCN in Node-RED?
Can I use Tailwind CSS directly in the template node to mimic the styling?
Are there any workarounds or recommended approaches?

Any help would be appreciated! Thanks.

2

Hmm, you seem to have chosen a very complex library to try and integrate.

My first question would be - do you really need the support of Dashboard if you are going to use those components?

Because if not, then you would likely be far better off using UIBUILDER which would give you full and direct control over everything.

If you do really want to use Dashboard 2, does it even let you use and configure Tailwind CSS which seems to be a pre-requisite of ShadCN?

The next issue will be how to translate all of the Typescript based documentation to let it work with Dashboard which is mostly JavaScript based. And you have to integrate it with VueJS and Veutify which are both requirements of Dashboard.

If you use UIBUILDER, you get an "instance folder" on the server for each instance of a uibuilder node that you configure. That folder is actually an npm package and so you can use it to install any development tools you need. You can't directly install tools needed to be delivered to the browser but uibuilder has its library manager for that.

You would be able to install and configure TailwindCSS and Vite - and indeed REACT if you prefer to that folder and work with them directly.

3

Thank you for your detailed explanation! I understand that UIBUILDER offers more flexibility, but I still prefer using Node-RED Dashboard 2 due to its built-in integration with Vue.js and Vuetify.

Regarding Tailwind CSS, I would like to configure it within a Node-RED template node. Do you have any insights on how to do this?

Would I need to include Tailwind's CDN directly in my template node, or is there a way to configure it within Dashboard 2? Any example implementations would be greatly appreciated!

4

Sorry, I don't use Tailwind and I don't really use Dashboard so can't help much. You can use a template for the HTML head section as well as body so that would be where to load the Tailwind CSS and any JS libraries.

You can place copies of the required css and js files in your public folder (which you set in settings.js) and load them from there - instructions in the docs somewhere.