Which component libraries would you recommend for a new Phoenix LiveView app?

Phoenix Forum Questions / Help
1

I am about to start writing a new Phoenix LiveView app. Are there component libraries that you would recommend?

1 Like
2

Doggo and SaladUI appear to be tackling the same problem. I’m not sure what the trade offs of either are.

There’s also LiveElement which isn’t a component library but a library for building web components that are backed by live processes. You should be able to port existing web component based libraries using this.

And me personally I prefer a more barebones approach to styling. I follow CUBE CSS methodology and lean heavily on the layouts defined in Every Layout. Reasoning about the cascade became ultra simple after reading through those. And they are made by the same team that did the lovely Web Dev project so I trust it. Hasn’t let me down in the 5 years since I’ve picked it up

5 Likes
3

I think styling and markup/functionality of components are separate concerns, and you can choose to prescribe a system for styling in a component library, or you can choose to be agnostic about it.

SaladUI seems to be built with Tailwind and theming in mind. Doggo just aims to give you the semantic markup, without prescribing any particular solution for styling. It also currently does not come with any default styles. I use it in combination with an SCSS setup (published as Barker), but that’s not a requirement.

+1 for Every Layout and CUBE CSS! I don’t follow the CUBE CSS methodology to the letter, but it has been very influential on the way I structure my projects.

1 Like
4

I just stumbled upon Bloom, which may be another option:

5

I don’t necessarily disagree but that’s not always the case. People do build components that manage no state except state that could be better managed by css itself. With cube css I tend to write more pages and almost no components at all

6

PrimerLive https://primer-live.org/

2 Likes
7

These are the Phoenix enabled component libraries that I have identified. Please feel free to correct me if I misstate anything. I’m very inexperienced on client side development.

Doggo

  • Large number of components.
  • Not frequently updated, perhaps because it’s fairly complete.

PrimerLive

  • Implementation of GitHub’s Primer Design System for Phoenix LiveView
  • Not frequently updated.
  • Very large number of components.

SaladUI

  • Attempt to port shadcn ui to LiveView components.
  • Large number of componentts.
  • Recent update to the repo.

Petal Components

  • Uses the Petal stack.
  • Large number of free components.
  • Large number of additional for-pay components.
  • Repo updated last month.

Phoenix Common Components

  • Officially supported.
  • Small number of components.
6 Likes
8

One more to add Mishka Chelekom - Chelekom - Phoenix & LiveView UI kit and components

1 Like
9

A new (paid) component option is Fluxon UI https://fluxonui.com/

I have purchased access for myself and it is pretty great :slight_smile:

2 Likes