Best UI Components library for Phoenix and Phoenix LiveView

When a developer first moves from the JavaScript ecosystem (especially from libraries like React and Vue) to Phoenix and Phoenix LiveView, one of the biggest gaps is the lack of ready-to-use UI packages and components. The Mishka team started by studying major libraries like Mantine and ShadCN, and also explored high-level enterprise packages in languages such as C#.

With Mishka Chelekom you can have the UI you see in the JavaScript ecosystem right inside Phoenix. The CLI adds components to your project, and you choose the colors, variants and sizes each one gets.

The Chelekom library and its UI kit have grown to 300+ components, covering all the essential needs of a professional dashboard.

Why is Mishka Chelekom the best choice for UI in the Phoenix framework?

1. It has 300+ components today: styled Tailwind components, 90+ headless components with no styling of their own, and form components built on Phoenix.HTML.FormField.
2. It is completely free and open source (Apache-2.0).
3. It builds on the built-in features of Phoenix and Phoenix LiveView with plain JavaScript, and avoids problematic ecosystems like ReactJS, which we believe create more issues than they solve.
4. There are no hidden dependencies in the project.
5. Each component is customizable and generated directly into your project by the CLI, so the library itself is not needed in production.
6. It can replace or complement other libraries, including Phoenix core components, depending on your project.
7. The CLI lets you share your own components with other developers as JSON, with no extra packages: mix mishka.ui.export builds the file and mix mishka.ui.add adds a component from a repository.
8. A community repository, mishka_chelekom_community, holds templates and extra components that are not part of the core library.
9. It is zero-config. One command, mix mishka.ui.gen.components, brings all components into your project, and the CLI makes the file changes it needs once you confirm.
10. It supports dark and light modes and custom color themes, powered by Mishka's own design system.
11. It works with AI coding agents. A built-in MCP server and usage rules for every component and JavaScript hook give tools like Claude Code and Cursor the real attributes, slots and allowed values.

Each part of the library has its own docs page, with live examples and commands:

Is Mishka Chelekom a complete replacement for Phoenix core components?

Yes. We replicated every component from Phoenix core with the same names, so installing everything with a single command raises no errors or warnings. We also designed this compatibility with users of the Ash framework in mind. To install everything and replace the core components in one step, run mix mishka.ui.gen.components --import --helpers --global --yes.

Can Mishka Chelekom be used alongside other UI components and packages?

Yes. Different CLI commands let you use the components next to other packages or your own custom components, and you can generate only a specific subset. Nothing locks you in. The components are created directly in your Phoenix components directory.

Is it possible to customize components in Mishka Chelekom?

Yes. You can fully customize each component inside your own project, and every element has a class property for your own styles. To restyle components without editing their files, use the Kit (MishkaChelekom.Kit), a small DSL where you declare colors and variants, or restyle a headless part, in one module.

Does the Mishka Chelekom library include multiple variants and custom color options?

Yes. One of the key differences between Mishka Chelekom and other packages is that it supports custom color themes and also offers multiple style variants for each component. This is especially helpful for backend developers and others with less frontend experience, because they can offer several design options in a project without writing any extra code.

We also added a variant called "Base" to all components. It resembles popular, widely used design patterns, so what you need works right out of the box.

Does the Mishka Chelekom library provide complete documentation for UI in Phoenix?

Yes, and it is one of the library's strengths. Each component has its own page with a wide range of examples and practical commands, so you can open a single page, such as Button or Forms, and see its variants and options in use.

Does the UI library for Phoenix support Tailwind?

Yes. Every component is built with Tailwind CSS, and the library has supported Tailwind 4 since v0.0.8. Thanks to the CSS implementation, many components need no JavaScript at all, which keeps the code simpler and avoids unnecessary state management. Other packages often bring in heavy libraries with their own ecosystems just to handle trivial states. The Mishka team takes the opposite approach: lightweight and purpose-driven.

To get started, open UI Components for Phoenix Framework to see the full list of components, or go straight to the docs. With the Mishka Chelekom library, you can add any kind of component you need to build professional panels and UIs in Elixir and Phoenix.

Thank you, Mishka Team