• Generates a set of UI heex components to start a project from.
• Generates a component catalogue live view.
• Uses daisyUI build on top of tailwindcss

The generated components are meant to be a point to start from. They will reside in your project space, where you can easily adjust them to your needs.

mix gen.components
mix gen.components -o other_components

• -o, --output - lowercase name of the module, that will hold the components. Defaults to components

See the demo project for some examples.

To see the demo project in action:

• checkout the project
• cd to the components_demo gonzo project
• run npm install in components_demo/assets
• call mix gen.components
• call iex -S mix phx.server
• visit catalogue

The package can be installed by adding gen_components to your list of dependencies in mix.exs.

def deps do
  [
    {:gen_components, "~> 0.1.0", only: [:dev]},
    # optional icon package
    {:heroicons, "~> 0.5.0"}
  ]
end

The generated components are meant to be changed after being generated. So it is recommendet to add the components folder to your live reload dev config:

# Watch static and templates for browser reloading.
config :my_app_web, MyAppWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"lib/my_app_web/(live|views|components)/.*(ex)$",
      ~r"lib/my_app_web/templates/.*(eex)$"
    ]
  ]

Run npm install in components_demo/assets, to use tailwind and daisyUI

Add the folowing to router.ex inside your project:

if Mix.env() == :dev do
  import MyAppWeb.ComponentsCatalogueLive
  catalogue_routes "/catalogue"
end

The custom components are used to format numbers and dates in the browsers locale. To make it work add the following to your app.js

// to activate local format custom components
import "./components"

1. Use the gonzo project to build your component.
2. Adapt it to the templates