V Vaylan UI

Installation

Getting started

Add Vaylan UI to a Phoenix project using Tailwind CSS 4 and daisyUI 5.

1. Add the dependency

Until the first Hex release, use a Git or local path dependency.

{:vaylan_ui, path: "../vaylan_ui"}

2. Include the component source and themes

Vaylan UI requires Tailwind CSS 4 and daisyUI 5. The source declaration lets Tailwind discover classes used inside the dependency.

@import "tailwindcss";
@source "../../deps/vaylan_ui/lib";
@plugin "daisyui" { themes: false; }
@import "../../deps/vaylan_ui/priv/vaylan_ui.css";

3. Configure the global theme

config :vaylan_ui,
  default_theme: "vaylan",
  themes: ["vaylan", "vaylan-dark"],
  theme_selection: :system,
  persist_theme: :local_storage,
  allow_theme_switching: true

4. Import the component API

def html_helpers do
  quote do
    use VaylanUI
  end
end

5. Load the small interaction helper

Bundle vaylan_ui.js before using persisted theme controls or modal triggers.

import "../../deps/vaylan_ui/priv/vaylan_ui.js";