Headless UI Components for Phoenix

Unstyled, accessible UI components for Phoenix and Phoenix LiveView. To be styled with the CSS framework of your choice.

Goals & Rules

• Provide unstyled Phoenix components as building blocks for your own UI components
• If something can be achieved with HTML and CSS only, it should be done with HTML and CSS only (no-JS)
• Where JS is required, use Alpine.js
• Use Alpine.data() instead of inline markup
• Components must work with standard Phoenix controllers (dead views)
• Components must work with Phoenix LiveView
• Components must work with standard Phoenix forms
• Components must be accessible (aria attributes, keyboard navigation, focus, etc.)

Components

Installation

The package can be installed by adding headless to your list of dependencies in mix.exs:

def deps do
  [
    {:headless, "~> 0.1"}
  ]
end

Usage

You should not use Headless components directly but use them as building blocks for your own components.

See examples directory for styling examples.

defmodule MyAppWeb.Components do
  use Phoenix.Component, global_prefixes: ~w(x-)

  attr :field, Phoenix.HTML.FormField

  def toggle(assigns) do
    ~H"""
    <Headless.toggle field={@field} class="...">
      <span class="...">Toggle</span>
    </Headless.toggle>
    """
  end
end

Development

# Start development server with examples
mix phx.server

Inspirations

• headless UI