Creating an awesome component library for Phoenix

Hey y’all!

The “promise” of Phoenix + LiveView, as least the way I perceive it, is that it’s especially suitable for solo developers and small teams, that don’t want to build a React app that loads 3 MB of JS to display “hello world” :slight_smile: . I think we’re close, but I don’t think we’re there just yet!

One key thing thing I think is missing is a good component library - and this doesn’t get enough attention IMO.

I’m mostly a backend developer, and I really don’t want to spend more time than necessary to get my site to look decent. React developer are super-spoiled and can find dozens of high quality UI component libraries.

What I personally would need from a component library would be:

  1. It looks “good” (I know, this is subjective). Think “Material UI” or “Tailwind UI” to get an idea of what I’m after.
  2. To use Atomic Design language - it should contain “molecules”, “organisms” and “template” components and not just “atoms” (basically more “complex” components than just a simple button).
  3. It follows some well established design system (e.g. Material Design). Attempting to come up with a good design system by oneself is a huge task!
  4. Purely functional components to keep things simple.
  5. It should be reasonably “complete” and contain the majority of components needed to build a website.

My questions

  1. Is there something like this out there already, and my Google-fu is just failing me?!
  2. If not - does anyone have any thoughts on how to best collaborate on making something like this? Is there a component library project that shows promise, but isn’t quite there, that I could contribute to?
  3. Are there any other people out there who are interested in trying to make this happen? Or is it perhaps just a me-problem, and y’all have already found good solutions for it?

I don’t wanna be the person that creates the 15th half-baked component library for Phoenix, that no one will be using :slight_smile: .

image

3 Likes

If You want to stick to liveview components, there is SaladUI… getting some traction

Its goal is to replicate shadcn UI with live components

I don’t think SaladUI is production ready yet, e.g. the dropdown doesn’t work as one would expect yet.

There is petal. I’ve not looked at it for a while but it looks like they’ve kept working on it.

There is moon which looked a bit flaky to me when it came out but have no idea of the quality now.

Thanks a bunch @kokolegorille and @cmo - I didn’t know about Moon or SaladUI.

I’m gonna leave this thread to marinate here for a bit, to see if someone else has any libraries or thoughts to contribute.

I’m slowly building a headless library of UX components that could be then used with any html/css - headless - Headless (unstyled) UI components for Phoenix (with Alpine)