Mithril UI

A comprehensive Phoenix LiveView component library built with DaisyUI theming and Flowbite-inspired designs.

Features

• 50+ Components - Actions, Forms, Feedback, Data Display, Navigation, Overlays, Typography, and more
• DaisyUI Theming - 35 built-in themes with custom theme support
• Phoenix LiveView - Built for LiveView with full HEEx template support
• Accessible - WAI-ARIA compliant components
• AI-Ready - Component metadata and schemas for AI-assisted development

Installation

Add mithril_ui to your list of dependencies in mix.exs:

def deps do
  [
    {:mithril_ui, "~> 0.1.10"}
  ]
end

Then run the installer:

mix deps.get
mix mithril_ui.install

Configure Tailwind CSS

For Tailwind CSS to properly compile the DaisyUI classes used by Mithril UI components, you must add the library to your Tailwind source paths.

For Tailwind CSS v4 (with @source directive):

Add the following to your assets/css/app.css:

@source "../../deps/mithril_ui";

For Tailwind CSS v3 (with tailwind.config.js):

Add the path to the content array in your tailwind.config.js:

module.exports = {
  content: [
    // ... your existing paths
    "../deps/mithril_ui/**/*.ex",
  ],
  // ...
}

Important: Without this configuration, DaisyUI utility classes used by Mithril UI components (like modal-box, card-body, etc.) will not be generated, resulting in missing styles.

Quick Start

1. Import Components

In your my_app_web.ex, add the components to your helpers:

defmodule MyAppWeb do
  defp html_helpers do
    quote do
      use MithrilUI.Components
      # ... other imports
    end
  end
end

2. Use Components

<.button variant="primary">Click me</.button>

<.card>
  <:header>Card Title</:header>
  <:body>Card content goes here.</:body>
  <:footer>
    <.button size="sm">Action</.button>
  </:footer>
</.card>

<.modal id="my-modal">
  <:title>Confirm</:title>
  <p>Are you sure?</p>
  <:actions>
    <.button phx-click={hide_modal("my-modal")}>Cancel</.button>
    <.button variant="primary">Confirm</.button>
  </:actions>
</.modal>

Component Categories

Actions

• button - Buttons with variants, sizes, and states
• button_group - Grouped button sets
• dropdown - Dropdown menus

Forms

• input - Text inputs with validation
• textarea - Multi-line text input
• select - Dropdown selection
• checkbox - Checkbox inputs
• radio - Radio button groups
• toggle - Toggle switches
• range - Range sliders
• file_input - File upload inputs

Feedback

• alert - Alert messages
• toast - Toast notifications
• modal - Modal dialogs
• drawer - Slide-out panels
• progress - Progress bars
• spinner - Loading spinners
• skeleton - Content placeholders

Data Display

• card - Content cards
• table - Data tables
• avatar - User avatars
• badge - Status badges
• accordion - Collapsible sections
• list_group - Vertical lists
• timeline - Event timelines

Navigation

• navbar - Top navigation
• sidebar - Side navigation
• breadcrumb - Breadcrumb trails
• tabs - Tab navigation
• pagination - Page navigation
• bottom_navigation - Mobile bottom nav

Overlays

• tooltip - Hover tooltips
• popover - Rich popovers

Typography

• heading - Headings h1-h6
• text - Styled text
• link - Anchor links
• blockquote - Quotations
• code - Code blocks
• kbd - Keyboard keys

Extended

• rating - Star ratings
• stepper - Step progress
• indicator - Status indicators
• chat_bubble - Chat messages
• footer - Page footers
• banner - Announcement banners
• carousel - Image carousels
• gallery - Image galleries

Utility

• theme_switcher - Theme selection
• clipboard - Copy to clipboard
• speed_dial - Floating action buttons

Theming

Mithril UI uses DaisyUI for theming. Configure themes in config/mithril_ui.exs:

config :mithril_ui,
  default_theme: "light",
  dark_theme: "dark",
  builtin_themes: :all

Custom Themes

Create custom themes with mix mithril_ui.gen.themes:

config :mithril_ui,
  themes: [
    %{
      name: "corporate",
      color_scheme: :light,
      colors: %{
        primary: "#4F46E5",
        secondary: "#7C3AED",
        accent: "#F59E0B"
      }
    }
  ]

AI Integration

Mithril UI includes AI-friendly component metadata for AI-assisted development:

# List all components
MithrilUI.AI.ComponentSelector.list_components()

# Get component suggestions
MithrilUI.AI.ComponentSelector.suggest_components("form submit button")

# Get component schema
MithrilUI.AI.ComponentSelector.get_schema(:button)

# Export JSON for AI tools
MithrilUI.AI.ComponentSelector.export_json()

Mix Tasks

• mix mithril_ui.install - Install Mithril UI in your project
• mix mithril_ui.gen.themes - Generate CSS from custom themes
• mix mithril_ui.mcp - Start MCP server for AI integration

AI Integration (MCP)

Mithril UI includes an MCP server for AI assistants like Claude Code.

Setup - Add to .mcp.json in your project:

{
  "mcpServers": {
    "mithril-ui": {
      "command": "mix",
      "args": ["mithril_ui.mcp"]
    }
  }
}

Available tools:list_components, get_component, suggest_components, get_examples, list_categories, list_themes, get_related

Documentation

• HexDocs

Requirements

• Elixir ~> 1.14
• Phoenix ~> 1.7
• Phoenix LiveView ~> 1.0
• DaisyUI ~> 4.0 (npm)

License

MIT License - see LICENSE for details.