Packages

corex

0.1.0-rc.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.

HexDocs

Current section

Files

Jump to
Readme
43 Versions
4 Dependencies
Dependants
Files
Activity
corex usage-rules components.md
Raw

usage-rules/components.md 

# Corex components



## MCP-first workflow



1. `list_components` — valid ids

2. `get_component { id: "<id>" }` — attrs, slots, events, docs, hook name



Never guess. Fallback: `mix usage_rules.search_docs "<id>" -p corex`.



## Wiring checklist



| Step | File | Action |

|------|------|--------|

| CSS | `assets/css/app.css` | `@import "../corex/components/<id>.css"` |

| Hook | `assets/js/app.js` | Register if component uses `phx-hook` |

| HEEx | `lib/*_web/` | `<.<id> id="stable-id" class="<id> …">` |



## Data builders



| Builder | Use for |

|---------|---------|

| `Corex.Content.new/1` | accordion, tabs, data-list |

| `Corex.List.new/1` | select, combobox, listbox, menu |

| `Corex.Tree.new/1` | tree-view |

| `Corex.Image.new/2` | carousel |



```heex

items={Corex.List.new([

  %{label: "France", value: "fra"},

  %{label: "Belgium", value: "bel", disabled: true}

])}

```



## Content.new + compound slots



List-driven:



```heex

<.accordion id="faq" class="accordion" items={Corex.Content.new([…])} />

```



Custom slots with `meta:`:



```heex

<.accordion

  id="faq"

  class="accordion accordion--accent accordion--sm sm:accordion--md lg:accordion--xl"

  items={

    Corex.Content.new([

      %{value: "q1", label: "Question?", content: "Answer.", meta: %{icon: "hero-chat-bubble-left-right"}}

    ])

  }

>

  <:trigger :let={item}>

    <.heroicon name={item.meta.icon} />

    {item.label}

  </:trigger>

  <:content :let={item}><p>{item.content}</p></:content>

  <:indicator><.heroicon name="hero-chevron-right" /></:indicator>

</.accordion>

```



## Hooks



Register keys matching `phx-hook` on the component — **PascalCase** (`Accordion`, `Select`, `Dialog`). Verify hook name from MCP `get_component`.



## Anatomy



```html

<div data-scope="accordion" data-part="root">…</div>

```



Target these only in Corex component CSS — never in template CSS.



## use Corex scoping



```elixir

use Corex

use Corex, only: [:accordion, :dialog], prefix: "ui"

```



## Common mistakes



- Missing stable `id`

- Wrong hook case (`dialog` vs `Dialog`)

- Guessing slots/events instead of MCP

- Hand-rolling markup without checking `list_components`



## References



- https://hexdocs.pm/corex/MCP.html