Corex

Hex.pm License Hex.pm Version GitHub Actions Workflow Status GitHub branch check runs

The Phoenix UI with a real API. Accessible, unstyled Phoenix components with a full server-and-client API, powered by Zag.js state machines.

Server & client API. Drive every component from LiveView or JavaScript and listen back from either side.
LiveView-native. Update props at runtime without resetting component state.
Truly unstyled. Bring your own CSS or opt into Corex Design tokens, themes and modes.
Accessible by default. Keyboard, focus and ARIA wired in by Zag.js state machines.

With {:corex, "~> 0.2.0"}, patch releases stay backward compatible within 0.2.x. See Updating Corex.

Requirements

Elixir~> 1.17

Packages

Package	Kind	Purpose	`mix corex.new`
`corex`	Hex dep	Unstyled Phoenix components, hooks, LiveView API	Always
`corex_design`	Hex dep (`runtime: false`)	Config-driven tokens, themes, and component CSS (Design)	On by default; `--no-design` to skip
`corex_mcp`	Hex dep (`only: [:dev, :test]`)	Dev MCP server for AI component and design discovery (MCP); never enable in `:prod`	On by default; `--no-mcp` to skip
`corex_new`	Mix archive	Greenfield generator (`mix corex.new`)	Install once with `mix archive.install hex corex_new`

Installation

New Corex application

Install the archives once:

mix archive.install hex phx_new
mix archive.install hex corex_new

Generate an application:

mix corex.new my_app

Design and MCP are on by default. Pass --no-design or --no-mcp to skip either package.

If you want the full feature set:

mix corex.new my_app --mode --theme --lang

Run mix help corex.new or see Mix.Tasks.Corex.New in Hexdocs for every Corex-only flag.

Existing Phoenix application

Follow the manual installation guide.

Try your first component

Accordion

<.accordion
  id="my-accordion"
  class="accordion"
  items={Corex.Content.new([
    [value: "lorem", label: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."],
    [value: "duis", label: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."],
    [value: "donec", label: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."]
  ])}
/>

API

Every Corex component exposes JS commands for client-side control and matching socket helpers for server-side control. You need an id on the component.

<.action class="button" phx-click={Corex.Accordion.set_value("my-accordion", ["lorem"])}>
  Open the first panel
</.action>

Each component documents API and Events on its Hexdocs page.

Corex is open source. If you rely on it in production or want to help sustain development, consider becoming a sponsor on GitHub.

Next steps

Formsfield, validation, and auto_invalid
MCP / corex_mcp AI tooling in development
Design tokens, themes, and modifiers
Theming / Dark mode / Localize pickers after --theme / --mode / --lang
Updating Corex migrate to 0.2.x
Production prod build and run
Manual installation add Corex to an existing Phoenix app
Tableau Corex on static Tableau sites