mix cinder_ui.install (cinder_ui v0.2.0)

Copy Markdown View Source

Installs Cinder UI into a Phoenix project.

By default the task references Cinder UI's CSS and JavaScript directly from deps/cinder_ui — nothing is copied into your project. It performs the following steps:

  1. Updates assets/css/app.css with:
    • @source "../../deps/cinder_ui";
    • @import "../../deps/cinder_ui/priv/templates/cinder_ui.css";
  2. Updates assets/js/app.js to import CinderUIHooks from the cinder_ui package (resolved via Phoenix's default esbuild NODE_PATH) and merges them into your LiveView hooks.
  3. Installs tailwindcss-animate using your detected or selected package manager. When no package.json exists in assets/, the installer will use the project root package.json if present, or create a minimal one in assets/.

Because the referenced files live in deps/cinder_ui, they update automatically whenever you upgrade the dependency — no re-run required.

Copy mode

With --copy, the task instead copies cinder_ui.css and cinder_ui.js into your assets/ folder and patches app.css/app.js to reference the local copies. Use this when you want to customize the shipped files, or when your build can't resolve deps/cinder_ui (for example a monorepo with a relocated node_modules).

In copy mode the files are a snapshot, so after upgrading Cinder UI re-run the installer to refresh them. The patch step has already run, so pass --skip-patching to only refresh the copies:

mix cinder_ui.install --copy --skip-patching

Options

  • --copy - copy cinder_ui.css/cinder_ui.js into assets/ and reference the local copies instead of deps/cinder_ui
  • --assets-path - path to the assets directory (default: assets)
  • --package-manager - npm, pnpm, yarn, or bun
  • --skip-existing - with --copy, do not overwrite copied files if they already exist
  • --skip-patching - do not patch assets/css/app.css or assets/js/app.js
  • --dry-run - print planned changes without writing files or installing packages

Example

mix cinder_ui.install
mix cinder_ui.install --copy --package-manager pnpm