Is it possible to make a Liveview UI component library?

For example, there are lots of UI component libraries on React.

Is it possible on Liveview?

I have no idea how to handle JS, CSS.

Yes. petalframework/petal_components: Phoenix + Live View HEEX Components (github.com) is one such example.

1 Like

Thanks!

It use tailwind (common CSS) and Phoenix.LiveView.JS module to don’t make *.js, *.css file.

How about if the component has a JS hook?

If you want to understand the structure of a component along with JS Hooks, please look at surface-ui/surface_bulma: A set of simple Surface components based on Bulma (github.com) - They contain some typical examples.
However, if you want examples only from LiveView and Heex - please look at the source code of fly-apps/live_beats (github.com) - Though it is not a component library, it contains the best practices for building both functional components and Live Components.

1 Like

Actually, this question was another version of Is there a good way to embed a phoenix app to another phoenix app?.

Inspired by GitHub - surface-ui/surface_catalogue, I succeeded to embed one phoenix application into another phoenix project.

Thank you so much!