CLI

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.

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 rounded

* --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

* --no-npm - Writes everything but skips installing the component's npm packages

* --yes - Makes directly without questions

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

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

Options for Batch Creation

* --import or -i - Generates an import file for the components

* --helpers - Lists each component's helper functions in the import file

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

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

* --component-prefix - Prefix for all component function names, for example --component-prefix mishka_

* --module-prefix - Prefix for module names, for example --module-prefix mishka_ makes Chat become MishkaChat

* --no-save - Uses the prefixes without saving them to the config file

* --no-npm - Passes --no-npm to every component it generates, so npm packages are not installed

* --with-npm - Also generates the components that install npm packages, which a batch skips by default

No component in the styled set installs npm packages today. These two flags matter for the headless set, which is covered below.

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.

Sometimes you want the behavior and accessibility, not our styling. The mix mishka.ui.gen.headless task generates unstyled components - semantic markup with full WAI-ARIA wiring, named part slots, data-* state, and the JavaScript behavior hooks. They ship no colors or spacing, so there are no --color, --variant, or --size options, and each one is written to lib/your_app_web/components/headless/ alongside the styled set.

Generate a single one, several at once, or all of them - and remove them the same way with the --headless flag on mix mishka.ui.uninstall.

mix mishka.ui.gen.headless dialog
mix mishka.ui.gen.headless.components dialog,tabs
mix mishka.ui.gen.headless.components

# Remove a headless component (add --all for every one)
mix mishka.ui.uninstall dialog --headless

Options for Headless Components

mix mishka.ui.gen.headless takes these options:

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

* --component-prefix - Prefix for the public function name

* --module-prefix - Prefix for the module name

* --no-save - Uses the prefixes without saving them to the config file

* --no-npm - Writes everything but skips installing the component's npm packages

* --lib - Chooses the JavaScript library for a component that has several engines, for example --lib chartjs

mix mishka.ui.gen.headless.components takes --exclude or -e, --component-prefix, --module-prefix, --no-save, --no-npm and --with-npm, which mean the same as above.

Headless Components That Need npm Packages

Two headless components wrap a JavaScript library: chart and editor. Generating one copies its engine into assets/vendor/ and installs the library, pinned to an exact version, with the package manager it finds. Bun is preferred, then npm and Yarn, and the Bun binary from Hex is the fallback, so a machine without Node still works. The task also adds assets/node_modules to .gitignore and puts the install in front of the assets.setup, assets.build and assets.deploy aliases in mix.exs, so CI and Docker builds install the packages before esbuild runs.

Because of that, a batch run does not pull in a third-party package on its own. mix mishka.ui.gen.headless.components skips chart and editor and prints which ones it skipped. Name them in the list, or pass --with-npm, to include them.

With --no-npm the task writes the component, the engine and the assets/package.json entries, and does not run the install. It prints cd assets && npm install for you to run before you build.

Choosing an Engine With --lib

chart takes echarts (the default), chartjs or billboard. editor takes tiptap (the default), code_mirror, milk_down or lexical. The markup you write does not change between engines. Every engine installs under the same file name, so running the task again with another --lib replaces the vendored file, and it removes the previous engine's packages from assets/package.json when they are still pinned at the version Chelekom wrote.

An unknown name stops the generation and lists the engines that component supports. --lib on a component with a single engine stops it too.

mix mishka.ui.gen.headless chart
mix mishka.ui.gen.headless chart --lib chartjs
mix mishka.ui.gen.headless chart --lib billboard
mix mishka.ui.gen.headless editor --lib tiptap
mix mishka.ui.gen.headless editor --lib code_mirror --no-npm

# Every headless component, npm-backed ones included
mix mishka.ui.gen.headless.components --with-npm

Removing Headless Components and Their npm Packages

mix mishka.ui.uninstall takes component names, --headless for the headless set and --all for every installed component of that kind. Without --headless or --mob, --all removes the styled and the headless components.

When the last component that needs an npm package is removed, the package stays in assets/package.json and the task prints a notice naming it. Pass --include-npm to remove it. That file is yours, so even then only a package still pinned at the exact version Chelekom wrote is removed. Any other package is reported and left alone.

mix mishka.ui.uninstall chart --headless
mix mishka.ui.uninstall chart --headless --include-npm
mix mishka.ui.uninstall --all --headless --include-npm

Native Android and iOS apps built with Mob have their own generators: mix mishka.ui.gen.mob writes one native component and mix mishka.ui.gen.mob.components writes several or all of them. mix mishka.ui.uninstall drawer --mob removes one.

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

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.

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.

You rarely need to run it yourself for Chelekom's own components: generating one that needs npm packages, such as the headless chart or editor, queues this task for you. Pass --no-npm to the generator to skip it.

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

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

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.

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.