How would a ChakraUI/MaterialUI be built for Phoenix?

Phoenix Forum Chat / Discussions
,
1

Hello everyone!

So, I come from the React.js community, and I’d first like to say that the path chosen by the Elixir community regarding Developer Experience has been amazing! It’s unbelievable how fast you’re able to deploy super useful new features. :smiley:

I’ve been learning Phoenix for a while and recently started a side-project favoring Liveviews whenever I can. Usually, I do a thorough research about how things are done and which tools I have available to use. I know about Alpine.js, Surface and Tailwind (my preferred solution even before Elixir) being used on most projects and having a great feedback from all of you.

But, for me, something is missing: a UI toolkit with basic frontend components.

This is something that from day-one gave me quite a joy when working with React. Lately, ChakraUI has been my choice, and I advise you to take a look at it. It brings two things to the table:

  • A basic set of components (Dialog, Buttons, Alert, Modals).
  • High customizability via props (adding margin, padding, changing any CSS…).

IMO, this is crucial to enable developers to move fast and worry only about their custom implementation!

I know that https://surface-ui.org brings some of it, but not quite sure if that’s also what the library is trying to solve in the long run. I speak about data-displaying components, date pickers, rich tables…

What I’d like to know is: do you see something like that being built for Phoenix? What does it look like? In any way, I’d like to help!

Some points that I’ve seen in other posts and might be considerable:

  • Web Components doesn’t seem to be the answer IMO, being more like a “sidecar”.
  • I know that some things are changing in Liveview regarding componentization. Should we wait for that?

Thank you

2 Likes
2

Here are some resources to check out:

1 Like
3

Welcome to the forum @lucis!

Like you already noticed, Surface is perhaps the closest thing we have today that solves this exact problem. Maybe there are others libs on hex that try to do something like this but with view helpers, idk.

Although I haven’t used it because of the hard dependency on LiveView, I encourage you to read this article and this issue that highlights what the future holds for LiveView, Surface and Phoenix.

One thing that is important to emphasize though is that Phoenix has little opinion on the technology you’ll use on the frontend. So, go ahead and use whatever UI Kit, framework and tooling you are comfortable with.

4

It’s a great idea and I hope we see something in the future. That said, it is fairly painless to use a JS UI kit by creating a hook for each component you want to use. You might be able to use Chakra, as there is a phoenix_live_react package out there.