Just wondering what the community currently thinks, prefers, and/or recommends for working with UI components. (e.g. daisyUI, MishkaChelekom, etc.)
3 Likes
I find IBM Carbon Components to be quite visually pleasing, but you have to either bring in React or Svelte, or wrestle the SCSS version which is a bear and unsupported with Phoenix.
I half-wrote a tailwind/phoenix component clone but it turned out to be a huge task. I should probably release it some day.
3 Likes
For all of my current endeavors (SaaS and otherwise), TailwindPlus is my go to. While it is obviously not a Liveview component framework, it’s easy enough to copy and paste the provided HTML into a Liveview component whenever you need to reuse their components more than a couple of times across the app. The components are all high quality and adapting the components to your theme is pretty easy by leveraging the Tailwind color pallette. Granted it costs money…but you get what you pay for…i.e quality looking responsive design components and layouts.
They recently introduced their web component version for some components that require JS. To be honest, this is both a blessing and a curse. On the one hand it does make it easier to use their components so long as you don’t need Liveview within the component. But if let’s say you need a form inside their modal component you may run into issues when Liveview patches the DOM. I haven’t found a good way around this at the moment…but I also only dove into the issue for just an afternoon.
5 Likes
@dbaer I agree, IBM Carbon does look pretty nice. It reminds me of an improved version of v1/v2 Material Design. I’ve never been a fan of Material, but I think Carbon is a good flat UI.
@akoutmos I’ve always wanted to try Tailwind Plus (when did they stop calling it Tailwind UI?), but I’m too cheap to shell out $300 USD for it. I haven’t had a good enough reason to justify the expense. 
2 Likes
If you are starting/running a business, $300 is a no brainer if you consider the time saving. 90% of my SaaS (https://eaglemms.com/) is based on Tailwind Plus components. I’ve made my money back many times over with time savings lol. That and it is a business expense so you pay for it with pre-tax money 
.
4 Likes
Hi dear @arcanemachine
I wanted to mention something about MishkaChelekom. One of the features I’ve recently worked on again is that you can use any other system alongside MishkaChelekom and vice-versa. We’ve built a large number of components that don’t exist in other libraries, and unlike the stateless approaches others have introduced, our components are built with Phoenix LiveView lifecycles.
Because of this, you can use the CLI to pick and use any component you like.
Personally, I think forms are still one of our weak points and we need to dedicate a full phase to improving them. But for everything else, I believe we have enough to build any dashboard. You get a solid collection of components with extensive features, and each component becomes part of your project, giving you plenty of room for customization.
And 100% free and open-source
6 Likes
SaladUI … specifically because it’s based off ShadCn and they even have a shadcn (react) → salad (live view heex) converter.
2 Likes
I find fluxon ui to be the best component library for LiveView in terms of quality. Very few stylistic issues (e.g. no odd icon placements or spacing issues type of issues) and has autocomplete which a lot of component libraries tend to not have implemented, like tailwind plus. It isn’t free but worth the cost IMO.
7 Likes
Yeah I really like Carbon also, but yeah, it’s a complete PITA to use with Phoenix sadly.
1 Like
Cool, your project is definitely at the top of my list for Phoenix-specific UI component libraries to try out.
That said, I do prefer the portability of a more universal solution, but I bet your library offers a lot of features that I cannot get with generic UI toolkits.
I totally forgot about SaladUI… I need to give that one a try as well. I’ve never tried ShadCDN or anything like it, but I have heard great things about it.
2 Likes
My long search was ended by https://basecoatui.com/.
2 Likes
I’ve gotten to a point where I just write CSS using layers. I still like utility classes for basic things, but with the advancements of CSS Tailwind is falling short with its humongous class lists and lack of reusability in templates. I see no point in using libraries that wrap Tailwind, just unneeded complexity.
And I even paid for Tailwind Plus when it was called Tailwind UI.
And of course, by writing just CSS everything goes through esbuild, no additional pre-processing needed.
3 Likes
This is the way
https://unocss.dev/ try this
1 Like
Some people posted about being hesitant to pay for Tailwind Plus.
I’m just one happy customer who paid for it in 2022 mostly to use their templates, and it was absolutely worth it. I’ve been using it literally by copy-pasting the code from their website and then evolving it myself while extracting some repetitive pieces into components.
Surprisingly, I found it quite convenient to live with some copy-paste for years until I finally need to change “something about all modals in all places” which is already a rare event. And even then, AI agents are quite good at that task.
