# Flowbite Components as Library resource

**URL:** https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243
**Category:** Third party Apps & plugins related to Pinegrow
**Created:** [November 22, 2022, 12:10pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243 "2022-11-22T12:10:19Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)
#### Post date: [November 22, 2022, 12:10pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/1 "2022-11-22T12:10:19Z")

</div>

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](https://flowbite.com/) and the Library is [here](https://github.com/domsinclair/FlowbiteComponents).

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.

---

<div class="post-metadata">

### Author: ![Wolfgang.Hartl](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/wolfgang.hartl/32/4621_2.png) [@Wolfgang.Hartl](https://forum.pinegrow.com/u/Wolfgang.Hartl)
#### Post date: [November 22, 2022, 1:42pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/2 "2022-11-22T13:42:57Z")

</div>

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.

 ![Bildschirmfoto 2022-11-22 um 14.41.55](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b17ca33dea3b43fc374869ada68d547eae3163d2.jpeg)

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

or

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

---

<div class="post-metadata">

### Author: ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)
#### Post date: [November 22, 2022, 2:11pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/3 "2022-11-22T14:11:03Z")

</div>

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.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1c91ef69504b86f2b8ccce883bfe8bb636afc451.png)

---

<div class="post-metadata">

### Author: ![Wolfgang.Hartl](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/wolfgang.hartl/32/4621_2.png) [@Wolfgang.Hartl](https://forum.pinegrow.com/u/Wolfgang.Hartl)
#### Post date: [November 22, 2022, 3:12pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/4 "2022-11-22T15:12:12Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)
#### Post date: [November 22, 2022, 3:34pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/5 "2022-11-22T15:34:59Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sydantes](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/sydantes/32/5045_2.png) [@sydantes](https://forum.pinegrow.com/u/sydantes)
#### Post date: [November 29, 2022, 3:56pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/6 "2022-11-29T15:56:45Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)
#### Post date: [November 29, 2022, 4:10pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/7 "2022-11-29T16:10:57Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sydantes](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/sydantes/32/5045_2.png) [@sydantes](https://forum.pinegrow.com/u/sydantes)
#### Post date: [November 29, 2022, 4:24pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/8 "2022-11-29T16:24:45Z")

</div>

Thanks you 😊, great jobs PinegrowBits 💯

---

<div class="post-metadata">

### Author: ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)
#### Post date: [December 5, 2022, 12:45pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/9 "2022-12-05T12:45:23Z")

</div>

I hope that the [new tutorial here](https://github.com/domsinclair/PinegrowBits/blob/master/reuseable.md) will prove to be of some use. Feel free to ask if there’s anything that isn’t clear.

---

<div class="post-metadata">

### Author: ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)
#### Post date: [December 13, 2022, 2:58pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/10 "2022-12-13T14:58:02Z")

</div>

@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](https://github.com/domsinclair/PinegrowBits/blob/master/createlibrary.md)

> Blockquote

---

<div class="post-metadata">

### Author: ![sydantes](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/sydantes/32/5045_2.png) [@sydantes](https://forum.pinegrow.com/u/sydantes)
#### Post date: [December 13, 2022, 3:41pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/11 "2022-12-13T15:41:20Z")

</div>

Thanks you so much for whole tutorial

---

<div class="post-metadata">

### Author: ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [December 14, 2022, 7:42am UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/12 "2022-12-14T07:42:55Z")

</div>

Nice one @Dom 👏🏾 thanks for this!

---

<div class="post-metadata">

### Author: ![tytusie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tytusie/32/6914_2.png) [@tytusie](https://forum.pinegrow.com/u/tytusie)
#### Post date: [October 15, 2023, 9:57pm UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/13 "2023-10-15T21:57:01Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Bryn](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/bryn/32/5487_2.png) [@Bryn](https://forum.pinegrow.com/u/Bryn)
#### Post date: [October 16, 2023, 11:43am UTC](https://forum.pinegrow.com/t/flowbite-components-as-library-resource/7243/14 "2023-10-16T11:43:09Z")

</div>

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.
