Packages
phoenix_duskmoon
9.0.1
9.10.1
9.10.0
9.9.10
9.9.9
9.9.8
9.9.7
9.9.6
9.9.4
9.9.3
9.9.2
9.9.1
9.9.0
9.8.0
9.7.1
9.7.0
9.6.4
9.6.3
9.6.2
9.6.1
9.6.0
9.5.4
9.5.3
9.5.2
9.5.1
9.5.0
9.4.3
9.4.2
9.4.1
9.4.0
9.3.0
9.2.0
9.1.4
9.1.3
9.1.1
9.1.1-rc.1
retired
9.0.1
9.0.0-rc.3
9.0.0-rc.2
9.0.0-rc.1
8.0.0
7.2.1
7.2.0
7.1.3
7.1.2
7.1.1
6.3.2
6.3.1
6.3.0
6.2.0
6.1.3
6.1.2
6.1.1
6.1.0
6.0.10
6.0.9
6.0.8
6.0.7
6.0.6
6.0.5
6.0.4
6.0.3
6.0.2
6.0.1
6.0.0
5.2.0-beta.5
5.2.0-beta.4
5.2.0-beta.3
5.2.0-beta.2
5.2.0-beta.1
5.1.0
5.0.6
5.0.5
5.0.4
5.0.3
5.0.2
5.0.1
5.0.0
4.6.6
4.6.5
4.6.4
4.6.3
4.6.2
4.6.1
4.6.0
4.5.2
4.5.1
4.5.0
4.4.4
4.4.3
4.4.2
4.4.1
4.4.0
4.3.2
4.3.1
4.3.0
4.2.0
4.1.1
4.1.0
4.0.0
Duskmoon UI component library for Phoenix LiveView
Current section
Files
Jump to
Current section
Files
phoenix_duskmoon
README.md
README.md
# PhoenixDuskmoon
[](https://github.com/duskmoon-dev/phoenix-duskmoon-ui/actions/workflows/test-and-release.yml)
Provides Duskmoon UI for Phoenix project.
Requires `tailwindcss >= 4.0` and `@duskmoon-dev/core >= 1.11.0`.
See the [docs](https://hexdocs.pm/phoenix_duskmoon/) for more information.
## Install
Add deps in `mix.exs`
```elixir
{:phoenix_duskmoon, "~> 9.0"},
```
Include in phoenix view helpers
```elixir
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`
```javascript
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`
```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](https://duskmoon-storybook.gsmlg.dev)
