Installation

View Source

Hex.pm License Hex.pm Version Coverage Status GitHub Actions Workflow Status GitHub branch check runs

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.

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

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."]
  ])}
/>

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>

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.