CIHex.pmDownloadsDocumentationLast CommitLicense: MITConventional Commits

Aurora UIX

Declarative, compile-time CRUD UI generation for Elixir's Phoenix LiveView. Build feature-rich, responsive interfaces with minimal code using metadata-driven configuration and a powerful layout DSL.

📖 Overview

Aurora UIX is a metadata-driven UI framework for Elixir's Phoenix LiveView that lets you rapidly generate complete CRUD interfaces from your Ecto schemas. Instead of writing repetitive form and list code, define your resource once and get a fully functional, responsive UI with built-in validation, association handling, and real-time updates.

Why Aurora UIX?

Key Features:

Technology Stack:

⚡ Quick Example

See Aurora UIX in action. In just a few lines of code, generate a complete, responsive product management interface:

defmodule MyAppWeb.Products do
  use Aurora.Uix
  alias MyApp.Inventory.Product

  # 1. Define resource metadata (once)
  auix_resource_metadata :product, context: MyApp.Inventory, schema: Product do
    field :name, placeholder: "Product name", required: true
    field :price, precision: 12, scale: 2
    field :stock, required: true
  end

  # 2. Define layouts for each view
  auix_create_ui do
    # Index with pagination
    index_columns :product, [:name, :price, :stock],
      pagination_items_per_page: 20

    # Organized edit form
    edit_layout :product do
      stacked do
        inline [:name]
        sections do
          section "Pricing" do
            stacked [:price]
          end
          section "Inventory" do
            stacked [:stock]
          end
        end
      end
    end

    # Detailed show view
    show_layout :product do
      stacked do
        inline [:name, :price, :stock]
      end
    end
  end
end

Result: Complete, responsive CRUD interface with:

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

Installation

1. Add Dependency

Add Aurora UIX to your mix.exs:

def deps do
  [
    {:aurora_uix, "~> 0.1.4"}
  ]
end

Then run:

mix deps.get

2. Configure the Stylesheet

Aurora UIX ships with pre-built CSS themes (light and dark by default). Generate the stylesheet:

mix auix.gen.stylesheet

This creates assets/css/auix-stylesheet.css. Import it at the end of your assets/css/app.css:

@import "./auix-stylesheet.css";

Important: The Aurora UIX stylesheet must be the last line in app.css so its styles take priority over any conflicting rules.

Tip: If you change the theme configuration or customize its style, re-run mix auix.gen.stylesheet to regenerate the stylesheet.

3. Configure Icons (optional)

Aurora UIX uses Heroicons for all UI icons. If your project doesn't already use Heroicons, generate the icon CSS classes:

mix auix.gen.icons

Then add an import at the top of your assets/css/app.css:

@import "auix-icons.css";

4. Create Your First CRUD UI

Create a module (e.g., lib/my_app_web/auix/product_ui.ex) and use the example above. Then register LiveView routes in your router:

scope "/inventory" do
  pipe_through(:browser)
  live "/products", Overview.Product.Index
  live "/products/new", Overview.Product.Index, :new
  live "/products/:id/edit", Overview.Product.Index, :edit
  live "/products/:id/show", Overview.Product.Index, :show
end

Or use the route helper for a shorter syntax:

import Aurora.Uix.RouteHelper

scope "/inventory", Aurora.UixWeb.Guides do
  pipe_through(:browser)
  auix_live_resources("/products", Overview.Product)
end

📚 Next Steps

💡 Use Cases

Aurora UIX excels in these scenarios:

Use Case Why Aurora UIX?
Admin Panels Generate admin dashboards for internal tools in hours, not weeks
Data Management Apps Build CRUD-heavy applications focused on data entry and management
Rapid Prototyping Quickly validate ideas and MVPs without UI boilerplate
Internal Tools Create tools for your team without investing in custom UI
CRUD-First Apps Applications where 80% of the UI is standard CRUD operations

Aurora UIX is best suited when:

📖 Documentation & Guides

Complete documentation is available in the guides and on HexDocs:

🚢 Deployment

Building your Aurora UIX application for production:

# Build the release
MIX_ENV=prod mix release

# Run the release
_build/prod/rel/aurora_uix/bin/aurora_uix start

For complete deployment guidance, see the Phoenix Deployment Guide.

🤝 Contributing

We welcome contributions! Aurora UIX is maintained by WAdvanced and community members.

Before contributing, read the Contributing Guidelines which includes:

Quick links:

📜 License

Licensed under the MIT License.

📧 Contact