Flowbite Components as Library resource

[Dom]

Have greatly enjoyed using some of the Flowbite components so I thought, in an attempt to familiarise myself with the option to add custom components to Pinegrow’s Library panel, That I would attempt to add the Flowbite Library.

NB: This lacks the professionalism of the work the Pinegrow team have done with other similar things and is to a certain extent hampered by my lack of design skills.

You can learn more about Flowbite here and the Library is here.

Any comments on how this could be done better would be much appreciated along with any glaring errors in my interpretation of the PG documentation on how to do this.

There are still a good number of categories to add to this which I will do as my spare time allows.

[Wolfgang.Hartl]

A little bit different than the component approach would be to add the site as a “page library” for example?

Since flowbite also has previews of the finished components you could just drag and drop those components from the preview into your PG-Project.

You could use that site here as entry point:
https://flowbite.com/blocks/ (if you want to use the blocks)

or

https://flowbite.com/ (if you want to use the categories)

[Dom]

Well that’s exactly what I’ve done locally, and when It’s finally complete I may consider a site for it (although by then I hope that flowbite and pg have designed something a little more professional themselves.

So by way of an example this is what I get to see on my machine, and each button can just be dragged to the page or selection tree.

I suspect I’m still missing key points though.

[Wolfgang.Hartl]

Not sure if I get you right here. You have placed all that buttons and so on a local site and then linked it via the feature I mentioned?

The big benefit I see in linking an external site is that you don’t have to maintain it and don’t have to care about updating your components to the latest version.

Not sure what you mean with “a little more professional”? In personally find that solution more advanced than anything else I’ve seen yet. Of course only in combination with a CSS-Framework, but you can drag and drop the full source code of a component to your page and adapt it as per your needs I find it quite handy to be honest!

Cheers

[Dom]

Essentially I’ve done exactly as you suggest in your first paragraph, I agree wholeheartedly that it would be much easier to link to an external resource, and better yet one that they themselves maintain, but as yet there isn’t one for the plain components.

What I meant by more professional was that I myself could probably have made a better job of actually styling it to work well in the library panel, however I freely admit that design is not exactly a strong point.

[sydantes]

can you teach us ? when you have free time, how to create local library like this ? not just flowbite, example chakra-ui, headless ui, meraki ui, there a lot component out there

[Dom]

That’s precisely what I intend doing. I’m using the Flowbite stuff as a means to understand the process fully then I’ll get around to documenting it.

[sydantes]

Thanks you , great jobs PinegrowBits

[Dom]

I hope that the new tutorial here will prove to be of some use. Feel free to ask if there’s anything that isn’t clear.

[Dom]

@sydantes I have now fleshed out a tutorial on the whole process of creating a custom library from start to finish, introducing the concepts of Pinegrow components and Master pages. Hope it proves useful. You can find it here

Blockquote

[sydantes]

Thanks you so much for whole tutorial

[TechAkayy]

Nice one @Dom thanks for this!

[tytusie]

Great! That’s super helpfull, i appreciate a lot, looking forward to learn something new and usefull!

[Bryn]

Wow, I’m going to try to find time soon to put this into action. I’ve used Flowbite with Pinegrow to great success, but I was doing things manually.