News>Announcing

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

/phoenix#library#tailwindcss#flowbite
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

8 comments
/phoenix#library#tailwindcss#flowbite
25 6129 8

Most Liked Responses

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.

5
Post #5
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
2
Post #3
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?

1
Post #2

Where Next?

View thread on forum (has 8 responses!)
phoenix
library
tailwindcss
flowbite
Home News>Announcing
/phoenix#library#tailwindcss#flowbite
25 6135 8
Last post

Popular in Announcing Top

bryanjos
News>Announcing

ElixirScript - converts Elixir to JavaScript
Hi, I just published version 0.23.0 of Elixirscript. https://github.com/bryanjos/elixirscript/blob/master/CHANGELOG.md Most of the chan...
#library#elixirscript
74 10035 42
New
blatyo
News>Announcing

Conduit - A framework for building reliable, event-based systems
The best overview for how things are tied together is this presentation. Modules and functions are pretty well documented at this point, ...
#library#rabbitmq#conduit#sqs#mqtt
69 7315 23
New
RobertDober
News>Announcing

Earmark - Elixir's Markdown Converter
Earmark is a pure-Elixir Markdown converter. It is intended to be used as a library (just call Earmark.as_html), but can also be used as...
#library#markdown#earmark
239 12560 134
New
type1fool
News>Announcing

WebAuthnLiveComponent - Passwordless Auth for LiveView Apps
WebAuthnLiveComponent WebAuthnComponents See this post about renaming the package. Passwordless authentication for Phoenix LiveView app...
/phoenix#authentication#security#library#liveview
214 7324 49
New
KronicDeth
News>Announcing

IntelliJ Elixir - Elixir plugin for JetBrain's IntelliJ Platform
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
#library#intellij
289 36128 110
New
treble37
News>Announcing

When "stringifying" keys in a map, would you want to convert struct keys to strings?
Just looking for a little feedback on a tiny helper library I built - Sometimes I find the need to convert maps with atom keys to maps w...
#library#maps
5 6971 4
New
archan937
News>Announcing

MecksUnit: Elegantly mock module functions in (async) ExUnit tests
It is a well-know topic within the Elixir community: “To mock or not to mock? :)” Every alchemist probably has his / her own opinion con...
#library#exunit#asynchronous#mocking#meck
19 6058 23
New
zachdaniel
News>Announcing

Ash Framework - a declarative, resource-oriented application development framework for Elixir
Ash Framework What is Ash? Ash Framework is a declarative, resource-oriented application development framework for Elixir. A resource can...
/ash#ash-news
151 13418 17
New
scohen
News>Announcing

Lexical - A Language Server for Elixir
Lexical Lexical is a next-generation language server for the Elixir programming language. Features Context aware code completion As-you...
#lsp
193 9327 78
New
trisolaran
News>Announcing

LiveSelect - Dynamic selection input component for LiveView
Hi! :waving_hand: I would like to present LiveSelect, a little library that I wrote to easily add a dynamic selection input to your LV f...
#library#liveview#liveview-form#live_select
198 10858 107
New

Other popular topics Top

vertexbuffer
Questions & Help>Questions

Deleting item from a list
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
7 24292 4
New
johnnyicon
Questions & Help>Questions

How do I use the Postgres JSONB / Postgrex JSON extension?
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
#ecto
22 17673 9
New
shahryarjb
Questions & Help>Questions

How to convert map to string (separated with ,)
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
#maps#strings
15 15660 2
New
josevalim
Official Elixir>Proposals

Behaviours, defoverridable and implementations
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
#official-elixir-proposal
111 22967 35
New
hariharasudhan94
Questions & Help>Questions

How to use return statement with if condition in elixir?
lets say i have a sample like a = 20; b = 10; if (a > b) do {:ok, "a"} end if (a < b) do {:ok, b} end if (a == b) do {:ok, "equa...
/phoenix
10 20190 6
New
aesmail
News>Announcing

Kaffy - a quick and flexible admin interface for phoenix applications
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
/phoenix#ecto#library#admin-tools#kaffy
301 24296 97
New
stefanluptak
Questions & Help>Questions

Using VSCode on multiple monitors
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
#vscode#vscode-elixir
7 17888 6
New
freewebwithme
Questions & Help>Questions

Failed to run 'elixir' command error in vs code
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...
#vscode#elixir-ls
49 16580 39
New
WestKeys
Questions & Help>Questions

Mint vs Finch vs Gun vs Tesla vs HTTPoison etc
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
#http_client
252 22413 30
New
PeterCarter
Questions & Help>Questions

Good auth solutions for Elixir/Phoenix?
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
/phoenix#authentication
48 21542 20
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

News>Announcing

News Announcing ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Dashbit

Build Elixir applications with speed and confidence.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Manning

Develop your skills with books, videos, and courses.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Manning

Develop your skills with books, videos, and courses.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement