Corex

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

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.

The public demo (e2e/ in this repo) is a showcase, not a starter app. Copy examples from component Hexdocs and from mix corex.gen.live / mix corex.gen.html.

Become a sponsor

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