zoltanszogyenyi

zoltanszogyenyi

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

Hey everyone :wave:

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?

crova

crova

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

groig

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
  }));
});

Where Next?

Popular in Libraries Top

tmbb
I’ve been working on two packages (not on hex.pm yet) to build admin interfaces for phoenix apps: bureaucrat - which contains a bunch ...
New
devonestes
Introducing assertions, the library that helps you write really great test assertions! GitHub: https://github.com/devonestes/assertions ...
New
Crowdhailer
The latest release of Ace (0.10.0) includes serving content over HTTP/2. I have started writing a webserver to teach my self more about...
New
sasajuric
I’d like to announce a small library called boundaries. This is an experimental project which explores the idea of enforcing boundaries ...
New
arkgil
Hi all! I’m happy to announce that Telemetry v0.3.0 is out! This release marks the conversion from Elixir to Erlang so that all the libr...
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
MRdotB
I needed to reuse React components from my Chrome extension in my Phoenix/LiveView backend. I noticed that for Svelte/Vue, there are live...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 42633 214
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
mplatts
With HEEX released we decided to start a components library using Tailwind CSS - check it out here: Petal Components. We also have a boi...
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...
3268 119930 1237
New
sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
William
I would like to know that is there any online source for learning Phoenix Framework for building E-Commerce Store? Any advantage on build...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
quazar
How to set Jason to encode all fields in ecto schema, I don’t care about security and implementing only is taking long list of attributes...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New

Sub Categories:

We're in Beta

About us Mission Statement