Introducing Mishka Chelekom v0.0.4 with Support for the Latest Phoenix LiveView

Introducing Mishka Chelekom v0.0.4 - A customizable UI library for Elixir and Phoenix LiveView with enhanced CLI tools, dark mode support, JavaScript parsing, and full component isolation—designed for seamless integration and future accessibility.

Mar 25, 2025 / 5 Mins Read
Shahryar Tavakkoli

Shahryar Tavakkoli

  • Introducing Mishka Chelekom v0.0.4 with Support for the Latest Phoenix LiveView
Phoenix
LiveView
Mishka

Introducing Mishka Chelekom v0.0.4 with Support for the Latest Phoenix LiveView


The Mishka team is excited to announce the release of Mishka Chelekom v0.0.4, following several months of dedicated development. This new version brings significant improvements, focusing heavily on better support for Phoenix core components, enhanced form handling, and the addition of new UI components.

One of the most notable upgrades in this release is the advanced CLI tool . It now allows you to effortlessly generate and import all necessary components into your Phoenix project—automatically and without any manual setup. We'll dive deeper into this feature shortly.

Before exploring the new features, we want to extend our sincere gratitude to everyone who has financially supported this project over the past months. Sadly, the number of contributors has been quite limited, and as a result, the collected funds remain modest.

We truly hope the Elixir community and Phoenix developers will continue to support us, as every part of this project remains free and open-source. Your recurring contributions, even as little as the price of a cup of coffee per month, will directly fund the ongoing development and growth of the library.


Support Our Work

98% of Mishka's products are open source, and we need your support to keep growing stronger.

Every contribution makes a difference and is deeply appreciated! ❤️



What’s New in Mishka Chelekom from v0.0.2 to v0.0.4:

(A detailed list of the new features follows...)


Dark Mode Support

As you know, Mishka Chelekom comes with its own unique design system. In this release, we’ve focused on adding initial support for color schemes, allowing you to easily access all components in both light mode and dark mode. This gives you the flexibility to seamlessly switch between themes based on your project needs.




Community Version & Component Sharing

Starting from version 0.0.2 and improved in 0.0.3, we introduced a powerful new feature in the CLI: HTTP-based component sharing. You can now share your custom components directly over the network or import them from a simple JSON file—perfect for use within your team or organization without the need for installation.

To take this feature even further, we’ve launched a dedicated community repository . Developers can contribute their designs by turning them into ready-to-use components. The CLI tool allows you to browse, download, and generate these community components directly into your project, making collaboration easier than ever.





Support for Phoenix LiveView 1.0.0 and Above

With the release of Phoenix LiveView 1.0.0, a new syntax was introduced for referencing Elixir variables inside templates. In preparation for this major change, we’ve optimized and updated all components in Mishka Chelekom to ensure full compatibility with LiveView 1.0.0 and newer versions. This guarantees seamless integration and a smoother developer experience when working with the latest LiveView features.




Import Argument Support in the CLI

The new CLI version introduces support for the --import argument. With a simple addition to your Mix task, you can now easily import any component directly into your Elixir project using Chelekom’s powerful macros.

One of the key advantages of this macro system is its selective import mechanism—only the component and its related helpers are imported, instead of pulling in the entire file set. This ensures better resource efficiency and cleaner project structure.




Added Phoenix Core Components for Improved Backward Compatibility

From the beginning, Mishka Chelekom followed its own approach to component design—merging several components and sometimes assigning them new names. However, we received feedback from some projects heavily reliant on Phoenix Core Components, where they experienced warnings or errors due to these changes.

To address this, we’ve now fully integrated all missing Phoenix Core Components in this release, ensuring better backward compatibility and a smoother migration experience for existing projects.




New JavaScript and CSS Parser & Formatter

One of the major challenges in previous versions was the inability to modify the app.js file easily. This made adding JavaScript hooks or integrating custom JS logic without manual configuration or deep CLI work nearly impossible.

In this release, the Mishka team, with the help of Rust, NIFs, and collaboration from the Ash team, has integrated a new project into Igniter called IgniterJS . This powerful addition allows you to:

  • Parse and format JavaScript files.
  • Add hooks dynamically
  • Format CSS files — all without modifying app.js manually

This means you can now leverage JavaScript to enhance your UI components effortlessly, without worrying about complex configurations. Plus, the new formatter ensures your CSS and JS files are stored clean, optimized, and beautifully formatted—all at incredible speed.




Introducing the Essential Scroll Area Component

While we haven’t listed every new component added in this release—because there are quite a few—we want to highlight one of the most important ones: the Scroll Area component.

Thanks to the integration of IgniterJS and support for phx-hook , we were finally able to build this essential component that will serve as a core dependency for many future components. The best part? You don’t need to modify a single line of your Phoenix project or its source code. Simply run the CLI command, and the component is ready to use.

Check out the video below to see some of the Scroll Area features in action.





Improved Form Components and New Additions

With this release, we also had the opportunity to expand and refine our form components. Two of the most requested additions— Phoenix Radio Card and Phoenix Checkbox Card —are now fully integrated. These beautifully designed components have already received great feedback across social media platforms.

Beyond the new additions, we conducted a thorough review of existing form components, fixing known issues and enhancing usability to ensure a smoother, more polished developer experience when working with forms in Mishka Chelekom.





Base Variant Added

One of the most requested features from our users was the addition of a Base variant—a simple yet modern style widely used across the JavaScript ecosystem and seen on many popular websites.

We’re excited to announce that every component in Mishka Chelekom now includes a Base variant, fully styled and supporting dark mode out of the box. This gives you even more flexibility to match your project’s design language with minimal effort.




Introducing the Combobox Component

Our brand-new Phoenix Combobox component is built entirely from scratch using phx-hook , delivering a powerful and highly customizable select experience.

With the Combobox, you can easily:

  • Create multi-select dropdowns
  • Add grouped options
  • Enable search functionality
  • Customize the appearance to fit your UI

It’s designed to be flexible and versatile, giving you the kind of control and aesthetics commonly found in modern frontend frameworks. Be sure to check the documentation page for examples and detailed usage.





New Helper Argument in the CLI

Some components require helper functions—for instance, managing field values, handling validations, or adding dynamic logic.

In this release, we’ve added a new --helper argument to the CLI. When used, it automatically imports all necessary helpers alongside the component using the import macro, making your integration process even more efficient and organized.




Global Argument Added to the CLI

As explained in the Mishka Chelekom installation and configuration guide , there are two ways to install the library. The first is a one-command setup that handles both installation and configuration automatically. The second requires manual edits to two or three sections of your project.

The new --global argument enables the one-command installation method and is completely optional.

Mishka Chelekom has been downloaded over 5,000 times on Hex, reflecting the growing interest from the community. We’ve worked hard to ensure you have maximum customization power to build and tailor everything you need.

With the addition of the JavaScript parser, project configuration and required changes have been minimized. Some parts of the library intentionally include duplicate code to provide better component isolation and zero dependency—allowing you to fully experience the flexibility of working with standalone components.




Roadmap for Version 0.0.5

In the upcoming v0.0.5 release, we will focus heavily on addressing the issues and feature requests submitted on GitHub. Our goal is to resolve these items and integrate them into the project.

Following that, we’ll enter a long-term phase dedicated to implementing basic accessibility (a11y) features across all components to improve usability and inclusivity.

Additionally, we plan to enhance IgniterJS to better support CSS changes and the latest features from Tailwind CSS. If Phoenix adds support for daisyUI, the Mishka team will also integrate this feature—allowing you to generate components styled with daisyUI directly via the CLI.




Custom Support and Services

We understand that some companies and clients may have specific needs that either fall outside our current roadmap or require faster implementation. To address this, we’ve introduced a custom support and services section.

Through this service, you can:

  • Request exclusive components tailored to your requirements
  • Have your design systems and UI designs fully implemented using our component architecture
  • Receive CLI-ready solutions designed specifically for your projects

For more details, feel free to explore our custom services section.




Final Words

Finally, we kindly ask all friends and users of the Mishka Chelekom project to consider supporting us with a small monthly contribution, even equivalent to one or two cups of coffee. Your support allows us to dedicate more time and resources to the project and continue expanding its features.

We also want to express our sincere gratitude to everyone who has supported us financially over the past months. A special thanks goes to Zach Daniel for his valuable support on the Igniter library and his continuous encouragement.

We look forward to bringing you even more exciting updates in the upcoming versions.


Special thanks to our financial supporters ♥️

@minidfx | @maxmannen | @alisinabh | @Dak425 | @pcharbon70 | @codylandry | @RicoMoorman | @chaz_watkins


Thank you, Mishka Team

Support Our Work

98% of Mishka's products are open source, and we need your support to keep growing stronger.

Every contribution makes a difference and is deeply appreciated! ❤️