DaisyUI Components for Phoenix

To make the components available in your templates, you must import the DaisyUIComponents module in your web file (typically lib/my_app_web.ex) within the html_helpers function.

Option 1: Keep Phoenix Core Components

Use this if you want to keep your existing CoreComponents and only add DaisyUI components. Note that this may cause conflicts if component names overlap.

defp html_helpers do
  quote do
    use Gettext, backend: MyAppWeb.Gettext
    import Phoenix.HTML

    use DaisyUIComponents, core_components: false
    import YourProjectWeb.CoreComponents
  end
end

Option 2: Replace Phoenix Core Components

Use this to use all DaisyUIComponents as your primary components. You must set core_components: true and remove the import for your project's CoreComponents.

defp html_helpers do
  quote do
    use Gettext, backend: MyAppWeb.Gettext
    import Phoenix.HTML

    use DaisyUIComponents, core_components: true
  end
end

Note on Conflicts: If you encounter conflicts in layout.ex, you may need to comment out the flash_group/1 component there.

# Example of replacing CoreComponents
defp html_helpers do
  quote do
    use Gettext, backend: MyAppWeb.Gettext
    import Phoenix.HTML

    use DaisyUIComponents, core_components: true
  end
end

After installation, you must perform two configuration steps in your Elixir code:

1. Set the translation function: In config/config.exs, define the translate_function option for :daisy_ui_components. This function is used to translate Ecto changeset errors.
2. Import components in your Web module: In your web folder's helper module (usually where html_helpers is defined), add use DaisyUIComponents.

Note on CoreComponents: DaisyUIComponents.CoreComponents acts as a drop-in replacement for the default Phoenix CoreComponents. If you want to use the library's defaults, comment out your project's existing import YourProjectWeb.CoreComponents to avoid conflicts.

# config/config.exs
config :daisy_ui_components, translate_function: &MyAppWeb.CoreComponents.translate_error/1

# lib/my_app_web.ex
defp html_helpers do
  quote do
    # Translation
    use Gettext, backend: MyAppWeb.Gettext

    # HTML escaping functionality
    import Phoenix.HTML

    # Import DaisyUI components into your project
    use DaisyUIComponents

    # Comment your own CoreComponents to not conflict with the defaults of this library.
    # import YourProjectWeb.CoreComponents
  end
end

Since DaisyUI requires npm, you must ensure your Phoenix asset pipeline is configured to run npm install and that your deployment environment (like Docker) is prepared.

Local Development Setup

Update your mix.exs assets.setup to include the npm command:

Docker Deployment

1. Ensure npm is installed in your Docker image.
2. Copy package.json and package-lock.json to the assets directory.
3. Run npm ci within the assets directory during the build process.

# mix.exs
"assets.setup": [
  "tailwind.install --if-missing",
- "esbuild.install --if-missing"
+ "esbuild.install --if-missing",
+ "cmd npm install --prefix assets"
]

# Dockerfile snippet
# install build dependencies
RUN apt-get update -y && apt-get install -y build-essential git npm \
    && apt-get clean && rm -f /var/lib/apt/lists/*_*

# ...
RUN mix deps.compile

# build assets
COPY assets/package.json assets/package-lock.json ./assets/
RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error