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.

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

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 --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", 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.

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

• Forms field, 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