Installation

1Purchase a license and create an API key

Purchase a Dizzy license, then sign in and create an API key. The secret value is shown only once, so save it in your password manager. Expose it to your shell or CI as DIZZY_LICENSE_KEY.

2Add the private Hex repository

Register the repository once on each development machine, or CI, or wherever you want to use it.

mix hex.repo add dizzy https://repo.dizzy.style \
  --fetch-public-key SHA256:hiPS7u7L5XcuK4aUuHFPS2b9KS4XB2Ert4Uw5bnkWGI \
  --auth-key "$DIZZY_LICENSE_KEY"

3Install the Dizzy Hex package

Add Dizzy, and Igniter if you don't already have it, to the dependencies in your Phoenix application’s mix.exs.

{:dizzy, "== 0.1.0-dev.1", repo: "dizzy", runtime: false},
{:igniter, "~> 0.8", only: :dev, runtime: false}

Fetch the package from the repository:

mix deps.get

4Set up Dizzy and add the components you want

Run mix dizzy.install once to perform the initial setup. This will try, using igniter, to setup all the one-time things, such as the CSS/JS setup. Then, run mix dizzy.add to add the components you want.

# Run once for Tailwind extensions and base hooks
mix dizzy.install

# Add the component modules you want
mix dizzy.add button link field

Manual setup

mix dizzy.install attempts to automate this initial setup. If it cannot recognize your project structure, make the following changes manually. These paths assume a standard Phoenix application. If you have some special setup, adjust the relative paths accordingly.

Import the Tailwind extensions

In assets/css/app.css, import Dizzy immediately after Tailwind:

@import "tailwindcss" source(none);
@import "../../deps/dizzy/assets/dizzy.css";

Register the base hooks

Import the base hook collection in assets/js/app.js or app.ts, then spread it into the existing LiveSocket hook object.

import { dizzyHooks } from "../../deps/dizzy/priv/static/bundled/core.js";

const liveSocket = new LiveSocket("/live", Socket, {
  // Keep your other LiveSocket options here.
  hooks: { ...dizzyHooks, ExistingHook },
});