Fluxon UI: A modern UI components lib for Phoenix LiveView

Hey there :wave:

I want to introduce Fluxon UI, a modern UI component library for Phoenix LiveView that I have been working on for the past few months.

Fluxon is a UI component library that focuses on:

  • User experience: Accessibility, keyboard navigation, focus management, dropdown positioning, closing on click/esc/lose-focus, animations… it just works.
  • Modern design: Creating a good-looking UI isn’t easy, so the components are designed to look great and feel modern. That also includes dark-mode support and responsive design.
  • Customizability: While all components have an opinionated design, most can be customized.

In short, Fluxon UI aims to make starting new Phoenix apps easier and quicker while also providing a good-looking UI.

A bit of history

I started working on Fluxon UI in July. At first, I saw it as a personal project for my own use. My motivation was similar to what many of us feel when kicking off a new Phoenix project: a lot of time goes into creating basic components and handling UI-related tasks. So, I decided to package these components so I could use it across all my projects. That’s essentially how Fluxon started. As I was working on it, I realized this was a common problem in the community which inspired me to think about turning it into a product. After about four months, Fluxon UI is now officially launched.

What is the meaning behind the name “Fluxon”?

Fluxon is a quantum of electromagnetic flux. What is the relation of this to UI components? Probably none :sweat_smile: but I like physics and the name sounded cool and short.

As always, any feedback is appreciated!

43 Likes

Love to see that stuff being taken care off. I just quickly tried out a few of the more relevant places and keyboard navigation worked quite well.

4 Likes

Ditto! This looks fantastic. Congrats on shipping!

4 Likes

Nice. Cant test it without buying it. But it looks nice. If i start a project and it gets investor backing maybe :wink:

But, doesnt this go on accord with the open source nature of the Elixir eco system ? Can you maybe package up a demo library at least ? Or is that impossible without revealing the crux :slight_smile: i understand why its not in libraries section :slight_smile:

Im all for getting value for time spent though :wink:

Good work :muscle: :pinched_fingers:

I’ve been using Fluxon for a couple of days now, and it’s incredibly well put together. I really like the way it looks, but I’m especially impressed by how everything just works – I couldn’t find a single edge case that Andriel hasn’t thought of. Sheets and modals are stackable, keyboard navigation works correctly all the time, elements position themselves perfectly relative to the screen etc. It would have taken me forever to build this myself, so I feel like it was a fantastic purchase. I’m really looking forward to having more components :slight_smile:

4 Likes

This looks really nice. Awesome work. I’ll definitely have a look at this later!

1 Like

Well done on the release!! Picked up my copy a couple of days ago and I am looking forward to integrating these components into my apps :smiley:.

1 Like

Congratz with the lib!

–and skip. as I posted before seeying –

What do you mean? This seems to be paid only, nothing free to be seen

I posted before seeing. You are right that the website is clear about this lib being paid and I like that (the clarity).

FYI github sign up is busted - I get Internal Server Error. :bug: still not deterred, google works fine. :japanese_ogre:
edit: I got email for github authorization

1 Like

My bad; it should be fixed now. There was an issue with GH accounts that use the private email feature, which I didn’t even know was a thing until today. Thank you for letting me know!

1 Like

really nice work; going to try on my next project

1 Like

Question: How do I add fluxon repo only once when I’m deploying my app on fly.io? RUN mix deps.get --only $MIX_ENV fails when I don’t have RUN mix hex.repo add fluxon ...

You can steal Oban’s instructions and just change the URL and key :slight_smile:
https://getoban.pro/docs/pro/1.4.9/fly.html

1 Like

The library looks great!
I’m thinking on purchasing it for use in some personal projects, but I’d like to know if there is a roadmap/plan for additional components. I’m looking for a date picker in particular.

1 Like

I will definitely buy it if @andrielfn make the combobox component available.

Looks very nice!

One comment: The sheets don’t work well with the navbar at the top of the page. For instance, if you open the full width sheet, it’s not possible to click the X to close the sheet. Also, I think there may be some text at the top of the sheets that I can’t see?

Also, another question: How would you compare this to e.g. Petal? What are the benefits of using Fluxon compared to other component libraries?

1 Like

Thanks! A datepicker is definitely on my list. I plan to focus on some more “basic” components first (toggle, breadcrumb, toast, button groups, etc), but at some point I definitely want to start working on a datepicker.

I guess when you say combobox you mean that select with input (autocomplete)? So many names and variations for these select components :sweat_smile: But yeah, in the beginning I tried to ship this as a variation of the select component, but things started to get too complex so I decided to keep it simpler.

Oops! I added an isolate class to the main content in a recent deploy, and it pushed the website header above everything. It’s more of a z-index issue than a problem with the sheet component. Thanks for the heads up! :blush:

I’ve never used Petal, so I can’t say much about it. But as a UI/UX fan, I personally wouldn’t use it because I’m not a fan of the UI/design.