PhoenixDuskmoon

release

Provides Duskmoon UI for Phoenix project.

Requires tailwindcss >= 4.0 and @duskmoon-dev/core >= 1.11.0.

See the docs for more information.

Install

Add deps in mix.exs

    {:phoenix_duskmoon, "~> 9.0"},

Include in phoenix view helpers

defp html_helpers do
  quote do
    # import all duskmoon ui components
    use PhoenixDuskmoon.Component
    # import all duskmoon ui css art components
    use PhoenixDuskmoon.CssArt
  end
end

Register custom elements in assets/js/app.js

import "@duskmoon-dev/el-button/register";
import "@duskmoon-dev/el-card/register";
// ... register all needed elements from @duskmoon-dev/elements
// Art custom elements from @duskmoon-dev/art-elements
import "@duskmoon-dev/el-art-moon/register";
// ... etc

Import css

@import "tailwindcss";
@plugin "@duskmoon-dev/core/plugin";
@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/themes/moonlight";
@import "@duskmoon-dev/core/components";

npm Dependencies

This package uses the following @duskmoon-dev npm packages:

Package Purpose
@duskmoon-dev/core CSS design system, theme tokens, Tailwind plugin
@duskmoon-dev/elements UI custom elements (<el-dm-*>)
@duskmoon-dev/css-art Pure-CSS decorative/animated art components
@duskmoon-dev/art-elements Art custom elements (<el-dm-art-*>)

Live Storybook

Live Storybook