Installation

Cinder UI is a component library for Phoenix LiveView applications. Follow these steps to add it to your project.

Prerequisites

You need an existing Phoenix 1.7+ project. If you don't have one yet:

  mix phx.new my_app
cd my_app

1. Set up Tailwind CSS

Cinder UI requires Tailwind CSS v4+. New Phoenix projects generated with mix phx.new include Tailwind by default — if yours already has it, skip to step 2.

Add the Tailwind plugin to your dependencies in mix.exs:

  defp deps do
  [
    {:tailwind, "~> 0.3", runtime: Mix.env() == :dev},
    # ...
  ]
end

Configure Tailwind in config/config.exs:

  config :tailwind,
  version: "4.1.12",
  my_app: [
    args: ~w(
      --input=assets/css/app.css
      --output=priv/static/assets/app.css
    ),
    cd: Path.expand("..", __DIR__)
  ]

Add the Tailwind watcher in config/dev.exs:

  config :my_app, MyAppWeb.Endpoint,
watchers: [
tailwind: {Tailwind, :install_and_run, [:my_app, ~w(--watch)]}
]

Add Tailwind to the deployment alias in mix.exs:

  defp aliases do
  [
    "assets.deploy": [
      "tailwind my_app --minify",
      "esbuild my_app --minify",
      "phx.digest"
    ]
  ]
end

Install Tailwind and fetch dependencies:

  mix deps.get
mix tailwind.install

Set up assets/css/app.css:

  @import "tailwindcss";

If your assets/js/app.js imports CSS (import "../css/app.css"), remove that line — Tailwind handles CSS compilation separately.

2. Add Cinder UI

Add the dependency to your mix.exs:

  defp deps do
  [
    {:cinder_ui, "~> 0.1.0"},
    # Optional but recommended — required for the <.icon /> component
    {:lucide_icons, "~> 2.0"},
    # ...
  ]
end

Fetch dependencies:

  mix deps.get

3. Run the installer

Cinder UI includes a Mix task that sets up CSS, JavaScript hooks, and Tailwind plugins automatically:

  mix cinder_ui.install

This will:

• Copy cinder_ui.css into assets/css/ (theme variables and dark mode)
• Copy cinder_ui.js into assets/js/ (LiveView hooks for interactive components)
• Update assets/css/app.css with:
  @source "../../deps/cinder_ui"; — so Tailwind scans component classes
  @import "./cinder_ui.css"; — loads theme tokens
• Update assets/js/app.js to merge CinderUIHooks into your LiveView hooks
• Install the tailwindcss-animate npm package

The installer auto-detects your package manager (npm, pnpm, yarn, or bun). To specify one explicitly:

  mix cinder_ui.install --package-manager pnpm

To re-run without overwriting customized files:

  mix cinder_ui.install --skip-existing

To only copy generated Cinder UI assets and skip patching app entry files:

  mix cinder_ui.install --skip-patching

4. Configure your app

Add use CinderUI to your app's html_helpers in lib/my_app_web.ex:

  defp html_helpers do
quote do
use Phoenix.Component
use CinderUI
# ...
end
end

Or selectively import only the modules you need:

  import CinderUI.Components.Actions
import CinderUI.Components.Forms

5. Start building

Start your Phoenix server:

  mix phx.server

Try a component in any template:

  <.button>Click me</.button>