I don’t think that components would be officially changed a lot. Phoenix core team prefers Tailwind and they are most probably not going to add support for let’s say Bootstrap or other CSS framework/library. Also the Tailwind styles are prepared for a default look of Phoenix applications.

It would be amazing if somebody would write a library that defines a set of components (i.e. HEEX + live part) and gives a user not only choice which framework/library to use, but also which theme should be applied.

import Config

config :my_app, MyApp.ComponentManager, default_theme: :theme_name, style: :bootstrap

defmodule MyApp.ComponentManager do
  use MyLib.ComponentManager, otp_app: :my_app

  component :custom_component, MyApp.Components.CustomComponent

  style :bootstrap, MyLib.Styles.Bootstrap
  # …

  theme :theme_name, MyApp.Themes.ThemeName
  # …

  manage config, %{profile: profile} do
    %{
      theme: profile.preferred_theme || config[:default_theme],
      # …
    }
  end

  prepare  _config, _component_module, data do
    data
  end
end

defimpl MyApp.Themes.ThemeName, for: MyLib.ComponentTheme.Button do
  def dark_variant(opts) do
    # …
  end

  def light_variant(opts) do
    # …
  end
end

defimpl MyLib.Styles.Bootstrap for: MyLib.Component.Button do
  def basic_style(opts) do
    type = opts[:type] || :primary
    # …
  end

  def render(assigns) do
    ~H"""
    <!-- … -->
    """
  end

  def sizing_style(opts) do
    # …
  end

  # …
end

alias MyApp.ComponentManager

<ComponentManager.button phx-click="…" profile={@current_user.profile} type: :primary>
  Button text …
</ComponentManager.button>

For example… the modal

  def modal(assigns) do
    assigns = assign_new(assigns, :patch, fn -> nil end)

    ~H"""
    <div id="modal" class="phx-modal fade-in" phx-remove={hide_modal()}>
      <div
        id="modal-content"
        class="phx-modal-content fade-in-scale"
        phx-click-away={JS.dispatch("click", to: "#close")}
        phx-window-keydown={JS.dispatch("click", to: "#close")}
        phx-key="escape"
      >
        <%= if @patch do %>
          <%= live_patch "✖", to: @patch, id: "close", class: "phx-modal-close", phx_click: hide_modal() %>
        <% else %>
         <a id="close" href="#" class="phx-modal-close" phx-click={hide_modal()}>✖</a>
        <% end %>

        <%= render_slot(@inner_block) %>
      </div>
    </div>
    """
  end

and the corresponding js code, where I changed transition classes

  defp hide_modal(js \\ %JS{}) do
    js
    |> JS.hide(to: "#modal", transition: "fade-out")
    |> JS.hide(to: "#modal-content", transition: "fade-out-scale")
  end

They try to be that while containing all the components needed to support the variuous generators phoenix ships with. They’re meant to be flexible enough to be used outside of that, but they primarily serve that usecase.