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.

With {:corex, "~> 0.1.0"}, patch and minor releases stay backward compatible until 0.2.0. See Updating Corex.

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 adds plug Corex.MCP in :dev and :test only (see MCP); never enable it in :prod. 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([
    [value: "lorem", trigger: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."],
    [value: "duis", trigger: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."],
    [value: "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>

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

• MCP Corex MCP for AI tooling in development.
• Design optional tokens, themes, and modifier classes.
• 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.
• Tableau Corex on static Tableau sites (Tableau Theming, Tableau Mode, Tableau Localize).