Installation

AvenUI can be installed as individual components or all at once. Components are copied directly into your project — you own the code.

1. Add the dependency

Add AvenUI to your mix.exs file. It's only used at compile-time for the installer.

elixir

defp deps do
  [
    {:aven_ui, "~> 0.1", github: "khemmanat/aven_ui"}
  ]
end

Then fetch the dependency:

bash

mix deps.get

2. Install components

You can install all components at once or pick individual ones.

Install everything:

bash

mix aven_ui.add --all

Or install specific components:

bash

mix aven_ui.add button badge alert

This creates the following in your project:

plaintext

lib/
└── your_app_web/
    └── components/
        └── ui/
            ├── button.ex
            ├── badge.ex
            ├── alert.ex
            └── ...

assets/
├── css/
│   └── avenui.css      # Component styles
└── js/
    └── hooks/
        └── aven_ui.js  # JS hooks for dropdowns, modals, etc.

3. Import components

Make components available in your views by importing them in your_app_web.ex:

elixir

# lib/your_app_web.ex

defp html_helpers do
  quote do
    # Phoenix defaults
    import Phoenix.HTML
    import YourAppWeb.Gettext

    # Import all AvenUI components
    use AvenUI, :components

    # Or import specific components
    # import AvenUI.Button
    # import AvenUI.Badge
  end
end

4. Add CSS and JavaScript

Import the AvenUI styles in your app.css:

css

/* assets/css/app.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* AvenUI component styles */
@import "./avenui.css";

And add hooks for interactive components (dropdowns, modals) in app.js:

javascript

// assets/js/app.js
import { AvenUIHooks } from "./hooks/aven_ui"

const liveSocket = new LiveSocket("/live", Socket, {
  hooks: {
    ...AvenUIHooks,
    // your other hooks
  }
})

5. Configure Tailwind (optional)

If you want to customize the default theme, update your tailwind.config.js:

javascript

// assets/tailwind.config.js
module.exports = {
  content: [
    "./lib/**/*.{ex,heex}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        // Override AvenUI's purple accent
        "avn-purple": "#8b5cf6",
      }
    }
  }
}

That's it! Start using components

elixir

<.button>Click me</.button>
<.badge variant="success">Active</.badge>
<.alert title="Welcome!">You've successfully installed AvenUI.</.alert>

Troubleshooting

Components not found

Make sure you've added use AvenUI, :components to your html_helpers in your_app_web.ex.

Styles not loading

Verify that avenui.css is imported in your app.css and that your CSS build process includes it.

Dropdowns/modals not working

These components require JavaScript hooks. Make sure AvenUIHooks are added to your LiveSocket configuration.