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

alisinabh
Hey everyone i’ve developed a library for Jalaali calendar for elixir which supports converting Gregorian dates to Jalaali and vice vers...
New
OvermindDL1
I created a new library (rather I pulled out a couple files from my big project), it manages an operating system PID file for the BEAM. ...
New
michalmuskala
Hello everybody. I have just released Jason - a new JSON library. You might be wondering, why do we need a new library? The primary foc...
New
bryanjos
Hi, I wanted share a small library we at Revelry Labs made for rendering react components from the server side. There are instructions fo...
New
josevalim
EDIT: since Ecto 3.0 final version is out, this post was amended to use the final versions in the instructions below. Hi everyone, We a...
New
mathieuprog
Hello :waving_hand: Allow me to introduce you to Tz, an alternative time zone database support to Tzdata. Why another library? First a...
New
kevinlang
Hey all, We have made an Ecto3 Adapter for SQLite3, ecto_sqlite3! We have successfully on-boarded the full suite of integration tests (...
New

Other popular topics Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54996 245
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

We're in Beta

About us Mission Statement