Phoenix Duskmoon UI

Phoenix Duskmoon UI

Elixir component library providing 80+ LiveView HEEX components that render as HTML Custom Elements (<el-dm-*>) styled by @duskmoon-dev/core.

Version: 9.4.0

Installation

# mix.exs
{:phoenix_duskmoon, "~> 9.4"}

bun add @duskmoon-dev/core @duskmoon-dev/elements @duskmoon-dev/css-art @duskmoon-dev/art-elements

Setup

1. Import components in app_web.ex

defp html_helpers do
  quote do
    use PhoenixDuskmoon.Component    # all dm_* UI components
    use PhoenixDuskmoon.ArtComponent # all dm_art_* decorative components
  end
end

2. CSS (assets/css/app.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";

For custom elements to inherit theme colors, include the element-theme-bridge (ships with the package or copy from the repo's assets/css/element-theme-bridge.css).

For CSS art effects, import each CSS art stylesheet you need:

@import "@duskmoon-dev/css-art/dist/art/eclipse.css";
@import "@duskmoon-dev/css-art/dist/art/snow.css";
/* ... etc */

3. JavaScript hooks (assets/js/app.js)

import { LiveSocket } from "phoenix_live_view";
import * as DuskmoonHooks from "phoenix_duskmoon/hooks";

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: DuskmoonHooks
});

Merge with your own hooks: hooks: { ...DuskmoonHooks, ...MyHooks }.

4. Register custom elements

import "@duskmoon-dev/el-button/register";
import "@duskmoon-dev/el-card/register";
// ... register each el-* package you use

Without registration, <el-dm-*> content is invisible.

5. Register chat elements (if using chat components)

import "@duskmoon-dev/el-chat/register";

Architecture (v9)

HEEX Components (dm_btn, dm_card)
       |
Custom Elements (<el-dm-button>, <el-dm-card>)
       |
@duskmoon-dev/core (CSS variables, design tokens)

CSS class naming (BEM): dm-component, dm-component--variant, dm-component__element

Hooks Reference

Component Quick Reference

All components use dm_ prefix. Common attributes across most components:

• id, class — standard HTML
• variant — visual style (values vary per component)
• color — primary | secondary | tertiary | accent | info | success | warning | error
• size — xs | sm | md | lg (varies per component)
• disabled — boolean
• rest — passes through global HTML attributes

For full component catalog with all attributes and slots, see references/components.md.

Action

Data Display

Data Entry

Feedback

Navigation

Layout

Icon

CSS Art (decorative)

All art components require id (required string) and accept class + rest global attrs. Import via use PhoenixDuskmoon.ArtComponent.

Usage Examples

<%!-- Button with variant --%>
<.dm_btn variant="primary" size="md">Save</.dm_btn>
<.dm_btn variant="error" shape="circle" loading={@saving}>X</.dm_btn>

<%!-- Button with confirmation dialog --%>
<.dm_btn confirm="Delete this item?" phx-click="delete" phx-value-id={@item.id}>
  Delete
</.dm_btn>

<%!-- Card with slots --%>
<.dm_card variant="bordered">
  <:title>Dashboard</:title>
  Content here
  <:action><.dm_btn variant="primary">View</.dm_btn></:action>
</.dm_card>

<%!-- Icons --%>
<.dm_mdi name="home" class="w-6 h-6" />
<.dm_bsi name="house" class="w-5 h-5" />

<%!-- Form with inputs --%>
<.dm_form for={@form} phx-submit="save">
  <.dm_input field={@form[:name]} label="Name" />
  <.dm_select field={@form[:role]} label="Role" options={[{"admin", "Admin"}, {"user", "User"}]} />
  <.dm_switch field={@form[:active]} label="Active" />
  <:actions>
    <.dm_btn variant="primary" type="submit">Save</.dm_btn>
  </:actions>
</.dm_form>

<%!-- Chat message --%>
<.dm_chat author="Assistant" avatar="AI" color="primary" content="Hello! How can I help?" />
<.dm_chat align="end" author="You" avatar="JG" variant="filled">
  What's the weather like?
</.dm_chat>

<%!-- Chat input --%>
<.dm_chat_input id="chat-input" placeholder="Type a message..." send_label="Send" />

<%!-- Chat reasoning section --%>
<.dm_chat_reasoning summary="Thinking..." open={false}>
  Step-by-step reasoning here...
</.dm_chat_reasoning>

<%!-- Chat typing indicator --%>
<.dm_chat_typing id="typing-indicator" />

<%!-- Code editor --%>
<.dm_code_engine
  field={@form[:source]}
  language="elixir"
  theme="one-dark"
  show_topbar
  title="example.ex"
/>

<%!-- Markdown editor --%>
<.dm_markdown_input
  field={@form[:body]}
  placeholder="Write markdown here…"
  upload_url="/api/uploads"
/>

<%!-- Navigation --%>
<.dm_appbar title="My App" title_to={~p"/"}>
  <:menu to={~p"/dashboard"} active={@active == :dashboard}>Dashboard</:menu>
  <:menu to={~p"/settings"}>Settings</:menu>
  <:user_profile>
    <.dm_avatar name={@current_user.name} size="sm" />
  </:user_profile>
</.dm_appbar>

<%!-- Theme switcher (requires ThemeSwitcher hook) --%>
<.dm_theme_switcher id="theme-toggle" theme={@theme} />

<%!-- Tabs --%>
<.dm_tab id="my-tabs" active_tab_index={0}>
  <:tab name="overview">Overview</:tab>
  <:tab name="details">Details</:tab>
  <:tab_content name="overview">Overview content</:tab_content>
  <:tab_content name="details">Details content</:tab_content>
</.dm_tab>

<%!-- Modal --%>
<.dm_modal id="confirm-modal">
  <:trigger><.dm_btn>Open</.dm_btn></:trigger>
  <:title>Confirm</:title>
  <:body>Are you sure?</:body>
  <:footer><.dm_btn variant="primary" phx-click="confirm">Yes</.dm_btn></:footer>
</.dm_modal>

<%!-- Art components --%>
<.dm_art_snow id="snow-1" />
<.dm_art_eclipse id="eclipse-1" />
<.dm_art_gemini_input id="ai-input" size="lg" placeholder="Ask anything..." />

Package Exports