Corex

View Source

Hex.pm License Hex.pm Version Coverage Status 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

PackageKindPurposemix corex.new
corexHex depUnstyled Phoenix components, hooks, LiveView APIAlways
corex_designHex dep (runtime: false)Config-driven tokens, themes, and component CSS (Design)On by default; --no-design to skip
corex_mcpHex dep (only: [:dev, :test])Dev MCP server for AI component and design discovery (MCP); never enable in :prodOn by default; --no-mcp to skip
corex_newMix archiveGreenfield 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

Add Corex to a Phoenix app you already have in 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 (helpers, on_*, and browser events).

Become a sponsor

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