Phoenix Duskmoon UI
View SourceDuskmoon UI component library for Phoenix LiveView applications.
Phoenix Duskmoon UI provides 60+ ready-to-use LiveView components that render as
HTML Custom Elements, powered by the @duskmoon-dev/core design system and
@duskmoon-dev/elements web component packages.
Architecture
Phoenix LiveView
│
▼
┌──────────────────┐
│ HEEX Components │ ← dm_btn, dm_card, dm_input (API layer)
│ (dm_* prefix) │
└────────┬─────────┘
│
▼
┌──────────────────┐
│ Custom Elements │ ← <el-dm-button>, <el-dm-card> (rendering layer)
│ (el-dm-* tags) │
└────────┬─────────┘
│
▼
┌──────────────────┐
│ @duskmoon-dev/ │ ← CSS custom properties, design tokens
│ core │
└──────────────────┘HEEX components provide a familiar Phoenix API (attr/3, slot/2, form field
binding) while the rendering is handled by custom elements with shadow DOM
encapsulation. The @duskmoon-dev/core design system provides all colors, typography,
spacing, and elevation tokens through CSS custom properties.
Quick Install
# mix.exs
{:phoenix_duskmoon, "~> 9.0"}bun add @duskmoon-dev/core @duskmoon-dev/elements
See the Getting Started guide for full setup instructions.
Component Categories
| Category | Examples | Count |
|---|---|---|
| Action | Button, Dropdown, Link, Menu, Toggle | 5 |
| Data Display | Card, Table, Badge, Avatar, Pagination, Timeline | 17 |
| Data Entry | Input, Select, Checkbox, Switch, Autocomplete, TreeSelect | 19 |
| Feedback | Dialog, Loading, Snackbar, Toast | 4 |
| Navigation | Appbar, Breadcrumb, Tab, Stepper, PageHeader | 12 |
| Layout | Divider, Drawer, BottomSheet, ThemeSwitcher | 4 |
| Icon | Material Design Icons, Bootstrap Icons | 1 |
| CSS Art | Snow, Eclipse, PlasmaBall, Signature, SpotlightSearch | 6 |
Guides
- Getting Started — Installation, view helpers, CSS and JS setup
- Migrating to v9 — Upgrade guide from v6/v7/v8 (DaisyUI to @duskmoon-dev/core)
- Theming — Sunshine/moonlight themes, CSS custom properties, custom colors
- Hooks — JavaScript hooks reference for LiveView integration