zoltanszogyenyi

zoltanszogyenyi

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

Hey everyone :waving_hand:

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

Most Liked

zoltanszogyenyi

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.

Eiji

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:

  1. phx.new like generator
  2. Modified core_components.ex file
  3. LiveView integration

See below documentation for more information:

  1. JavaScript interoperability
  2. Phoenix.Component
  3. Phoenix.LiveComponent
  4. Phoenix.LiveView.JS
Sebb

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?

Last Post!

lessless

lessless

It might be better to open an issue in the GitHub and provide a reproducible repo

Where Next?

Popular in Announcing Top

bryanjos
Hi, I just published version 0.23.0 of Elixirscript. https://github.com/bryanjos/elixirscript/blob/master/CHANGELOG.md Most of the chan...
New
mindok
What is ContEx? A pure Elixir server-side data plotting/charting library outputting SVG. It has nice barcharts in particular and works g...
New
fuelen
Hey folks! Want to present a toolkit for writing command-line user interfaces. It provides a convenient interface for colorizing text...
New
nikokozak
Hello all, I’ve been working on Svonix - a library for quickly integrating Svelte components into Phoenix views. It’s a much-needed succ...
New
benlime
LiveMotion enables high performance animations declared on the server and run on the client. As a follow up to my previous thread A libr...
New
wojtekmach
Hey everyone! Req is an HTTP client for Elixir that I’ve been working on for quite some time. There is already a lot of HTTP clients out...
New
restlessronin
The repo is at GitHub - cyberchitta/openai_ex: Community maintained Elixir library for OpenAI API · GitHub. Docs are at OpenaiEx User Gu...
152 10739 134
New

Other popular topics Top

Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 130579 1222
New
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement