Corex - Accessible and unstyled UI Phoenix components

Looking great, congrats on the launch!

Thanks for doing this!

I have been hoping to see something based on ZagJS for a while and I’m very thankful you’ve taken this on. I’m excited to see this grow

Do you have plans for 3-state switch? That’s a feature which is often missed, but very helpful.

Do you support / or plan to support “native” HTML5 + CSS3 solutions (that does not require JavaScript at all). See below link for an accordion example:

A huge for making components accessible by default - it’s a huge help for developers!

There is currently no plan to have other interactive component than Zagjs
Mainly because they come packed with accessibility features that would be hard to replicate and test
Let’s take an example:
The accordion has Direction (LTR/RTL) and an orientation (Vertical/Horizontal).
Some items may be disabled
The user can navigate from one Item to the previous/next with keyboard arrows.
The logic will change depending on the combinaison of all props and will skip the disabled items

You can see an example in the e2e app on the Accordion Playground /playground/accordion

Thank you for the support

Phoenix Form Support

Corex now supports Phoenix forms for Checkbox, Select and Switch components.

You can simply pass a Phoenix form field to the components

• In controller views, the client is the source of truth.
• In LiveView, the server remains the source of truth and components sync accordingly
• Validation errors stay fully synchronized and are fully customizable.
• Error rendering follows Phoenix’s native input interaction model, preventing error messages from appearing on fields the user has not interacted with.
• Get error translations with custom Gettext Backend

All components pass Phoenix.LiveViewTest, making them safe drop-in replacements for components generated by Phoenix generators.

The E2E app includes both controller and LiveView form examples generated with:

• mix phx.gen.html
• mix phx.gen.live

Screenshot from 2026-02-05 00-16-48324×386 12.7 KB

Read Documentation

https://hexdocs.pm/corex/Corex.Form.html

Phoenix Flash Support

The Toast component now supports the native Phoenix Flash system.

• Pass flash={@flash} to toast_group and use flash messages as usual.
• New components are introduced for the following lifecycle events:
  • phx-connected
  • phx-disconnected
  • client-error
  • server-error
• You can define custom toasts for these four lifecycle events anywhere in your application.

Toast creation is now more flexible, with a loading option available for all toast types.

Screenshot from 2026-02-05 00-09-10334×132 7.18 KB

More details:

Accordion List Support

Thanks to the advise from @achempion, Accordion now supports loading items from a list via Accordion.List.Item.

This feature uses the unified Corex.Collection.Item structure, which includes an additional meta field for attaching custom, dynamic data to each item.

<.accordion
  class="accordion"
  items={[
    %Corex.Accordion.Item{
      value: "lorem",
      trigger: "Lorem ipsum dolor sit amet",
      content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique.",
      meta: %{
        indicator: "hero-chevron-right",
      }
    },
    %Corex.Accordion.Item{
      trigger: "Duis dictum gravida odio ac pharetra?",
      content: "Nullam eget vestibulum ligula, at interdum tellus.",
      meta: %{
        indicator: "hero-chevron-right",
      }
    },
    %Corex.Accordion.Item{
      value: "donec",
      trigger: "Donec condimentum ex mi",
      content: "Congue molestie ipsum gravida a. Sed ac eros luctus.",
      disabled: true,
      meta: %{
        indicator: "hero-chevron-right",
      }
    }
  ]}
>
  <:item :let={item}>
    <.accordion_trigger item={item}>
      {item.meta.trigger}
      <:indicator>
        <.icon name={item.meta.indicator} />
      </:indicator>
    </.accordion_trigger>

    <.accordion_content item={item}>
      {item.meta.content}
    </.accordion_content>
  </:item>
</.accordion>

See more Accordion examples

Select and Combobox Enhancements

Select and Combobox components now support:

• Grouping
• Disabling items
• Per-item customization using dynamic data

These components rely on the unified Corex.Collection.Item structure with a meta field for extensibility.

combobox279×387 10.6 KB

Corex.Select — Corex v0.1.2
Corex.Combobox — Corex v0.1.2

Design Tokens

Integrate design tokens into Tailwind CSS v4 using Style Dictionary and Tokens Studio, entirely from Elixir, with no Node.js dependency.

Use the mix corex.design mix task to generate and manage design tokens. Full instructions are available in the documentation

New components

Five new components are available:

• Clipboard Copy text to the clipboard with configurable trigger and copied states

• Collapsible Show/hide content with expand/collapse

• Date Picker Date selection with calendar view and keyboard navigation

• Dialog Modal dialogs with focus management and accessibility support

• Tabs Tabbed interfaces for organizing content

Unified list item

Accordion and Tabs now share a common %Corex.List.Item{} struct. Use it for programmatic item lists:

%Corex.List.Item{

  value: "item-1",

  trigger: "Section title",

  content: "Section content",

  meta: %{indicator: "hero-chevron-right"}

}

Form integration

Phoenix Form docs have been expanded for Checkbox, Date Picker, Select, and Switch, including:

• Controller usage

• LiveView usage with controlled mode

• Ecto changeset examples

See each component’s documentation for examples.

Feedback is always welcome. Happy coding

Dark Mode Toggle

Built on Corex.ToggleGroup, it uses a triple-layer approach (cookies + localStorage + immediate script execution) to ensure:

• No FOUC (Flash of Unstyled Content)
• Syncs across browser tabs
• Respects system preferences
• Works perfectly with LiveView and controllers

Signature Pad

• Full Phoenix form integration (controllers & LiveView)
• Works with and without Ecto changesets
• Controlled/uncontrolled modes
• Customizable drawing options (color, size, pressure simulation)

Signature Pad joins the growing collection of form components (checkbox, select, date picker) that work seamlessly in both traditional controllers and LiveView, with or without Ecto Changeset

Happy coding

Corex Demo is live

Thanks to Gigalixir to offer a great hosting experience for elixir and Phoenix
Try Corex in production with some example for each components, a Phoenix form in a controller and in a Live View, language switch, dark mode and site navigation

Language Switch and RTL

Using the select component, Plugs and cookies, Corex guide you to implement your own local system using Gettext. RTL support is also available to synchronize all components

https://hexdocs.pm/corex/locale.html

Tree View

New component added to display a tree of data with the ability to use it as a navigation. Works in controller and Live View

Feedback is always welcome. Happy coding

Tree view live produces an internal server error on the demo site.

Thanks for trying out. TreeView Live View page is fixed now.

On the same update I also improved the code splitting and lazy loading of the components.
Only loads the components in use on the current page.
Check out the new “Performance” section on the Installation guide
The chunks we see are the shared parts between the components, so no duplication.

image321×391 17.8 KB