How do I use PhoenixUI ? (https://phoenix-ui.fly.dev/)

Phoenix Forum Questions / Help
,
1

I don’t understand how to use the code in step four to render a component. The instructions are not clear.
https://phoenix-ui.fly.dev/

I am hoping someone out there has a complete live view component example that is minimalistic and renders a single component. If I could see that I can move forward. I simply don’t know what they are asking me to do.

EDIT.

I do not see a “View Helpers” function in app_web.ex

1 Like
2

You can put it inside html_helpers
The point of that code is to have functions from PhoenixUI available everywhere (on the front-side of app)

3

Thanks.

No matter where I place:

use PhoenixUI

It does not recognize it.
I loaded it in my deps ( mix deps.get )
I updated the tailwind config.

Then I did this…but I get an error saying it isn’t recognized.

  defp html_helpers do
    quote do
      # HTML escaping functionality
      import Phoenix.HTML
      # Core UI components and translation
      import AppWeb.CoreComponents
      import AppWeb.Gettext
       use PhoenixUI

      # Shortcut for generating JS commands
      alias Phoenix.LiveView.JS

      # Routes generation with the ~p sigil
      unquote(verified_routes())
    end
  end
4

@wktdev you might prefer https://petal.build/components. I found it the same but different and a bit easier to follow.

I’m not knocking Phoenix UI but Petal is very actively maintained and has more documentation, which is probably what you need.

5

Can you post full error?

6

@dstockdale Thanks I’ll give it a shot

7

I think owner of library made a typo in docs. Try with use Phoenix.UI

8

Indeed, the Github version GitHub - keatz55/phoenix_ui: A complimentary UI library for the Phoenix Framework and Phoenix LiveView. is:

  defp view_helpers do
    quote do
      ...
      # Phoenix.UI macro which imports all components and JS interactions
      use Phoenix.UI
      # Or import components individually
      import Phoenix.UI.Components.{Button, Tooltip, ...}
      ...
    end
  end
9

First time seeing this lib and just wanted to say thanks for sharing this.

10

The entire library conflicts with my generator. I think the developer does it intentionally to get you to buy their library. No thanks

Unfortunately, this means the generators like mix phx.gen.live won’t work properly. If you want generators for Petal Components, look into buying Petal Pro.

11

You don’t have to use it (I share your opinion regarding the lib)
I posted a solution to your original problem above :slight_smile:

12

Hey, Petal maintainer here. Sorry to give the impression we are money hungry. Petal Components existed before core_components.ex was added to the Phoenix generator, so not really possible for us to intentionally create naming conflicts.

How to handle the conflicts:

I understand Petal Components generators would be handy and we are considering open-sourcing them. It’s tempting to make everything free but then we wouldn’t have the resources to maintain them as we’d have to go back to full-time jobs.

4 Likes