mix cinder_ui.install (cinder_ui v0.2.2)

Copy Markdown View Source

Installs Cinder UI into a Phoenix project.

Cinder UI's CSS and JavaScript are referenced directly from deps/cinder_ui — nothing is copied into your project, and there is no npm package to install (the tailwindcss-animate utilities are inlined into Cinder UI's CSS). The task performs two edits:

  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.

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

Doing it by hand

The CSS edit is just two lines. If you would rather not run the task, add them to assets/css/app.css yourself (after @import "tailwindcss";):

@source "../../deps/cinder_ui";
@import "../../deps/cinder_ui/priv/templates/cinder_ui.css";

Then import the hooks in assets/js/app.js and merge them into your LiveView hooks:

import { CinderUIHooks } from "cinder_ui"
// ...
let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { ...CinderUIHooks },
  // ...
})

Options

  • --assets-path - path to the assets directory (default: assets)
  • --skip-patching - do not patch assets/css/app.css or assets/js/app.js
  • --dry-run - print planned changes without writing files

Example

mix cinder_ui.install
mix cinder_ui.install --assets-path assets