The Chelekom library is fully powered by the Igniter project, providing a zero-configuration experience. With its helper tools for Elixir mix tasks, it enables developers to easily create a suitable generator for building components in minimal time.

Providing a seamless developer environment, removing dependencies, and reducing configuration to zero are among the strengths of the Chelekom project, which was our primary goal from the start. Many of us know that backend developers often prefer not to get involved in frontend work. Therefore, the Mishka team aimed to create a structure that meets developer needs in the shortest possible time.

Unified Naming and Customizable Properties

At the beginning of the project, we aimed to unify the naming conventions and properties of all components within a consistent design system, enabling developers to customize parts of each component during creation.

Customizing Components

You can customize each component with the following options:

* --variant or -v - Specifies component variant

* --color or -c - Specifies component color

* --size or -s - Specifies component size

* --padding or -p - Specifies component padding

* --space or -sp - Specifies component space

* --type or -t - Specifies component type

* --rounded or -r - Specifies component type

* --no-sub-config - Creates dependent components with default settings

* --module or -m - Specifies a custom name for the component module

* --sub - Specifies this task is a sub task

* --no-deps - Specifies this task is created without sub task

* --global - Makes components accessible throughout the project without explicit imports

* --yes - Makes directly without questions

* --exclude - Comma-separated list of components to exclude

For example, the alert component can be generated with a specific type and color, ensuring no extra code is added to your project. This helps reduce the volume of Tailwind CSS classes, which is especially beneficial when building complex components. Consider a simple example: a poorly optimized loop in a carousel component could result in an 800KB payload being sent from the server for a single component. Imagine a dashboard with multiple options, including 4 paginations and several forms on the same page. Based on Mishka's experience, you could be sending several megabytes of payload to the client, so controlling the component creation layer with a top-down approach helps ensure efficient project structure.

mix mishka.ui.gen.component alert
mix mishka.ui.gen.component button --size large -c primary

Batch Creation of Components

The Mishka library effectively replaces Phoenix's core components. You can generate all components at once with the --import option, creating a file that imports all components, which can then be used throughout your project, particularly in the YourProjectWeb file, making the components accessible across your entire application.

mix mishka.ui.gen.components
mix mishka.ui.gen.components alert,divider,footer
mix mishka.ui.gen.components --import --yes

# Install all components with helper functions and
# macros for importing, and globally replace them with
# Phoenix core components (**Recommended**)
mix mishka.ui.gen.components --import --helpers --global --yes

# Or if you have Igniter in your project
# For more information: https://ash-hq.org/
mix igniter.new my_app --with phx.new --install mishka_chelekom

Future Plans for Mix Task Enhancements

The good news is that we have special plans for enhancing the mix task structure of this project, which will be implemented in future versions.

Note on Custom Options for Components

Each component comes with customizable options, allowing you to execute more dynamic commands based on your needs.

Using Chelekom for Improved Performance

The Chelekom library, with its roots in the Igniter project, was designed to create components with a minimal configuration environment. By providing helper functions for Elixir's mix task, Chelekom allows developers to easily generate highly optimized components in a short time frame.

Our goal from the start has been to streamline the development environment, eliminate unnecessary dependencies, and reduce configuration overhead to zero. Backend developers, who typically prefer not to get involved with frontend tasks, will find this particularly useful. The Mishka team has focused on providing a solution that meets the developer's needs with minimal effort.

Installing npm Dependencies

The mix mishka.assets.install task simplifies dependency management across different package managers in your Phoenix project's assets directory. This task supports npm, yarn, and bun package managers.

Usage Examples

Install dependencies using npm:

mix mishka.assets.install npm install tailwindcss

Remove dependencies using yarn:

mix mishka.assets.install yarn remove some-package

The task automatically handles the differences between package managers, normalizing commands (e.g., converting "install" to "add" for yarn) and provides colorful console feedback for success and failure states.

🦺 Important: If you have no package manager installed, it installs **Bun** binary and adds it to your mix.exs .

Adding Components from Repositories

The mix mishka.ui.add task enables you to download and integrate Phoenix components, templates, and presets from external repositories. This powerful feature allows teams to share custom components and quickly add community-contributed components to your project.

Security Warning

⚠️ Important: Always verify external component sources before integration. Only use components from trusted repositories to ensure the security of your application.

Available Options

* --no-github - Use a URL without GitHub replacing

* --headers - Specify custom request headers for the repository URL

Repository References

* Official Library: mishka_chelekom

* Community Components: mishka_chelekom_community

mix mishka.ui.add https://github.com/user/repo/component.json

Exporting Components to JSON

The mix mishka.ui.export task generates a JSON file from your component directory, making it easy to share and reuse UI components across different projects or with team members.

Naming Convention Requirements

Components must follow these naming conventions:

* Each component requires both .eex and .exs files

* File names should start with the section type: component_ , preset_ , or template_

Available Options

* --base64 or -b - Convert component content to Base64 encoding

* --name or -n - Define the JSON file name (default: template.json)

* --org or -o - Organize the file structure

* --template or -t - Create a default JSON template

mix mishka.ui.export --name my-components.json --base64

Managing CSS Configuration

The mix mishka.ui.css.config task provides comprehensive CSS configuration management for Mishka components. Thanks to Tailwind 4's new features, you can now override any color or CSS setting, including changing all colors to match your organization's brand colors.

Configuration Features

The configuration system stores all settings in Elixir format in a config.exs file within your project's priv directory. This configuration is designed for the development environment and provides an easy way to customize your component styles.

Available Options

* --init - Create a sample configuration file

* --force - Overwrite existing configuration

* --regenerate - Regenerate CSS files with your custom configuration

* --validate - Validate your current configuration

* --show - Display the current configuration

Example Commands

Initialize configuration:

mix mishka.ui.css.config --init

Regenerate CSS with custom configuration:

mix mishka.ui.css.config --regenerate

Validate configuration:

mix mishka.ui.css.config --validate

This powerful feature addresses one of the most requested capabilities since version 0.0.1, allowing developers to easily import their own color palettes and customize the appearance of all components without modifying the component code directly.

What's Next for Chelekom?

We are excited to share that there are special plans for improving the mix task structure of Chelekom in upcoming versions. These future enhancements will make it even easier to work with the library and build robust, efficient applications.