Installation

Introduction

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.

Beta Stage

Corex is under active development The public API is stabilizing for most of the components Please report any issues on GitHub.

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

By default Corex Design will be installed. You can use --no-design to opt out.

By default the installer also adds the plug Corex.MCP hook for development and test (see MCP); use --no-mcp if you do not want it.

If you want the full feature set:

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

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([
    [id: "lorem", trigger: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."],
    [id: "duis", trigger: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."],
    [id: "donec", trigger: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."]
  ])}
/>

If you are using Corex Design import the accordion css

@import "../corex/components/accordion.css";

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>

Next steps

• MCP Corex MCP for AI tooling in development.
• Dark mode light/dark wiring after --mode.
• Theming theme picker after --theme.
• Localize locales and routes after --lang.
• Production prod build and run.
• Manual installation add Corex to an existing Phoenix app.