Phoenix UI

Phoenix UI home page
  1. Getting Started
  2. Installation: Tailwind CLI

Installation

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

Steps

Below are the necessary insructions for installing and using Phoenix UI.

1. Install Tailwind CSS with Phoenix

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

2. Install Phoenix UI

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


    defp deps do
      [
        {:phoenix_ui, "~> 0.1.1"},
      ]
    end
    

3. Configure Tailwind CSS to Import Phoenix UI Classes

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


    const plugin = require('tailwindcss/plugin')

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

        # Allows PhoenixUI css to be processed by JIT.
        "../deps/phoenix_ui/**/*.*ex",
      ],
      darkMode: "class",
      plugins: [],
      theme: {
        extend: {},
      },
      plugins: [
        plugin(function({ addVariant }) {
          # Enables explicit form error styling.
          addVariant('invalid', '&.invalid:not(.phx-no-feedback)')
        })
      ],
    };
    

4. Import Phoenix UI Components

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


    defmodule MyAppWeb
      ...

      defp view_helpers do
        quote do
          ...

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

          ...
        end
      end