A complimentary UI library for the Phoenix Framework and Phoenix LiveView.

Phoenix UI depends on Phoenix 1.6. Before proceeding, please ensure you have either upgraded your existing app to 1.6 or the app you have generated is using 1.6.

Follow the official guide for setting up Tailwind CSS in a Phoenix project.

Available in Hex, the package can be installed by adding phoenix_ui to your list of dependencies in mix.exs:

def deps do
  [
    {:phoenix_ui, "~> 0.1.7"},
  ]
end

Documentation can be found at https://hexdocs.pm/phoenix_ui.

Add a new path pattern to assets/tailwind.config.js so Tailwind can import and utilize Phoenix UI css classes:

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',

+    // Allows Phoenix.UI css to be processed by JIT compiler.
+    "../deps/phoenix_ui/**/*.*ex",
  ],
  darkMode: "class",
  plugins: [
+    // Allows form error styling
+    plugin(({ addVariant }) =>
+      addVariant("invalid", ".invalid:not(.phx-no-feedback) &")
+    ),
  ],
  theme: {
    extend: {},
  },
};

There are multiple ways to import components. We recommend importing components in your application {app}_web.ex view_helpers function:

  ...

  defp view_helpers do
    quote do
      ...

      # Phoenix.UI macro which imports all components and JS interactions
      use Phoenix.UI
      # Or import components individually
      import Phoenix.UI.Components.{Button, Tooltip, ...}

      ...
    end
  end