Packages
corex
0.1.0
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
usage-rules/skills/corex-installation/SKILL.md
---
name: corex-installation
description: >-
Load when running mix corex.new, mix corex.design, adding {:corex} to mix.exs,
configuring esbuild --format=esm --splitting, LiveSocket with csrfToken and
hooks: { ...colocatedHooks, ...corex } in assets/js/app.js, use Corex in
lib/*_web.ex, type="module" on app.js script tag, toggle.css select.css for
mode/theme pickers, or toast_group layout in root layout.
---
# Corex installation
## New project
```sh
mix corex.new my_app
```
## Existing app — order matters
1. `{:corex, "~> 0.1.0"}` → esbuild ESM splitting → LiveSocket + hooks → `type="module"` script → `use Corex` → `mix assets.build`
```javascript
const liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
hooks: { ...colocatedHooks, ...corex },
})
```
Lazy hooks: PascalCase keys (`Dialog: () => import("corex/dialog")`).
## Design + optional toast
```sh
mix corex.design
```
Import `toggle.css` / `select.css` when using mode/theme/lang pickers.
MCP: `plug Corex.MCP` in dev only — see **corex-mcp**.
Full checklist: sub-rule `corex:installation`. MCP `installation_guide` when server is running.