Flowbite - open-source UI components for Phoenix Framework (Elixir)

zoltanszogyenyi

Hey everyone

Excited to join this forum - I am one of the founders and current project maintainers of a popular and open-source UI component library called Flowbite based on Tailwind CSS and I recently wrote a guide on how you can use the I full I collection I of components together with Phoenix Framework (Elixir).

I’m generally curious about what your feedback or opinion would be for this integration guide and I’m eager to see our collection of over 54 standalone components (navbars, modals, date pickers) be used within a Phoenix/Elixir project.

I also built a free and open-source Phoenix and Flowbite starter kit on GitHub that can help you get started with a bootstrapped project right away.

Cheers,
Zoltan

8 comments

/phoenix #library #tailwindcss #flowbite

15 6551 8

2023-12-09 12:07:11 UTC

Showing Posts 1 to 8

Show Best Posts
Show All (oldest first)
Show All (newest first)

Sebb

Hey Zoltán, welcome.

Personally I’m using Daisy now, as it has not JS and thus plays very nicely with LV.
Flowbite could be interesting as it is more powerful (thanks to JS).
Didn’t read your guide yet, but I wonder how all that JS in flowbite plays with LV?

Post #1

Eiji

Unfortunately it’s a pure CSS + JavaScript library with lots of amazing components and guides. The linked Phoenix project is based on version 1.6.x.

People reading your post could expect few things:

phx.new like generator
Modified core_components.ex file
LiveView integration

See below documentation for more information:

Post #2

crova

According to his reply on reddit there are no known issues.
I haven’t tested it though.

Post #3

zoltanszogyenyi

Hey everyone,

Thanks for the feedback.

Unfortunately it’s a pure CSS + JavaScript library with lots of amazing components and guides. The linked Phoenix project is based on version 1.6.x.

People reading your post could expect few things:
…

I am aware of this, however, the guide is there to showcase how it can be used as a JS library, though I would be more than happy to collaborate on creating a native integration with LiveView components - after all Flowbite is also open-source so the components can be ported to any framework or language.

The guide does indeed include a walkthrough for pre-v1.7 versions of Phoenix, but the guide also states that you can skip the Tailwind CSS installation part if you have v1.7 or later. The other parts of the guide are relevant and are tested with Phoenix v1.7.

Hey Zoltán, welcome.

Personally I’m using Daisy now, as it has not JS and thus plays very nicely with LV.
Flowbite could be interesting as it is more powerful (thanks to JS).
Didn’t read your guide yet, but I wonder how all that JS in flowbite plays with LV?

DaisyUI is great, as far as I am concerned I have found no immediate issues after working a couple of hours with Phoenix (Elixir) and Flowbite, but if problems do arise I am available to provide updates and manage PRs if others want to contribute.

According to his reply on reddit there are no known issues.
I haven’t tested it though.

That is right, for the short term I have found no problems using the two together.

Post #4

groig

There seems to be an issue with the Flowbite events not triggering after LiveView navigation but the fix is pretty easy as pointed by @egze here and here:

window.addEventListener('phx:page-loading-stop', (event) => {
  // trigger flowbite events
  window.document.dispatchEvent(new Event("DOMContentLoaded", {
    bubbles: true,
    cancelable: true
  }));
});

Post #5

superchris

If flowbite supports web components (which seems like it would be a perfect fit for what you are trying to do), you might want to check out live_elements. It would offer you an easy path to LiveView integration.

Post #6