💖 Hey there! If you like my work, please support me financially! 💖
Mishka Chelekom is a powerful library designed to simplify the process of building UI components in Phoenix and Phoenix LiveView projects. Unlike other solutions, it generates fully customizable components directly into your project—no hidden dependencies, no complex configurations.
With our rich collection of ready-to-use components, comprehensive documentation, and numerous examples, you can easily tailor every element to fit your needs. All components are generated locally (by Our mix generator), giving you full control over the source code without being locked into any external library.
💼 All components are completely free and open-source.🥂
For Pro support and enterprise services, click here! to get in touch with us.
Mishka Chelekom is a library offering various templates for components in Phoenix and Phoenix LiveView - Phoenix UI kit and components.
This means you can generate any component listed in this project using a
CLIcommand with customizable options.For example, you can create a component with an
infocolor and a "shadow" variant without having any unnecessary code clutter.
If you want to add another variant in the future, the project is powered by the Igniter library, which makes it easy to update the previous code seamlessly.
You will only use this library in your development environment, and it will not have any presence in production.
def deps do
[
{:mishka_chelekom, "~> 0.0.8", only: :dev}
]
endGenerate all components inside the components directory of your Phoenix project.
mix mishka.ui.gen.component alert --color info --variant default
mix mishka.ui.gen.component alert
# For Windows users please use `""` when you have more than
# one value for an argument
mix mishka.ui.gen.component alert --color "info,danger"mix mishka.ui.gen.components
mix mishka.ui.gen.components alert,accordion,chatmix mishka.ui.gen.components --import --yes
mix mishka.ui.gen.components alert,accordion,chat --import --yesThis command creates all the components along with a file where all the components are imported.
# Install all components along with helper functions and macros for importing
mix mishka.ui.gen.components --import --helpers --yes
mix mishka.ui.gen.components alert,accordion,chat --import --helpers --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
# Alternatively, if your project includes Igniter and
# you are using the latest alpha version, you can run:
mix igniter.new my_app --with phx.new --install mishka_chelekomAll options
Generates a single component with specified options like color, variant, and size.
--variantor-v- Specifies component variant--coloror-c- Specifies component color--sizeor-s- Specifies component size--paddingor-p- Specifies component padding--spaceor-sp- Specifies component space--typeor-t- Specifies component type--roundedor-r- Specifies component type--no-sub-config- Creates dependent components with default settings--moduleor-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--yes- Makes directly without questions
Generates multiple components at once, optionally with an import file and helper functions.
--import- Generates import file--helpers- Specifies helper functions of each component in import file--global- Makes components accessible throughout the project without explicit imports--yes- Makes directly without questions--exclude- Comma-separated list of components to exclude (e.g.,--exclude alert,badge)
Imports components from external sources using JSON configuration files or URLs.
--no-github- Specifies a URL without github replacing--headers- Specifies a repo url request headers
Generates a JSON file from a directory of components for sharing or use with mishka.ui.add.
--base64or-b- Converts component content to Base64--nameor-n- Defines a name for JSON file, if it is not set default is template.json--orgor-o- It is only for structuring the file and has no effect on your export--templateor-t- Creates a default JSON file for manual processing steps
This task runs package manager install or remove commands in assets directory. It supports npm, yarn, bun and mix package managers.
Examples:
mix mishka.assets.install npm- Runs npm install in assets directorymix mishka.assets.install npm pkg remove lodash- Removes lodash packagemix mishka.assets.install yarn mix install- Runs mix yarn install
Manages CSS configuration for customizing component styles and CSS variables.
--initor-i- Creates a sample configuration file--forceor-f- Force overwrite existing configuration file (use with --init)--regenerateor-r- Regenerates CSS files with current configuration--validateor-v- Validates the current configuration--showor-s- Shows the current configuration
This project ensures optimal performance by minimizing dependencies and leveraging the advanced features of Tailwind CSS.
- Project Page: https://mishka.tools/chelekom
- Project Documentation: https://mishka.tools/chelekom/docs
- Created components list: Heex file and configs
- Hex.pm: https://hex.pm/packages/mishka_chelekom
- Elixir
- Phoenix
- Phoenix LiveView
- Tailwind CSS
- Pure JavaScript
- Do I need any config or external project?
The Chelekom library is fully zero-configuration, meaning you don't need to install anything other than the library itself
- What does the generator do?
The generator does all the work for you, from building to updating and transferring the heex, ex files to your Phoenix project.
- What should be done for Phoenix umbrella projects?
Just go to the path of your desired Phoenix project and execute the required Mix commands there.
- How much will this project be updated?
In the initial versions, we managed to create more than 80 components for Phoenix and LiveView, and our goal is up to 200 components. After that, we are going to build complete templates as well as a very useful API for programmers.
- Are these components not developed after offering the paid version?
Our paid services are not about components at all, but more facilities, including exclusive support, as well as complete templates, etc., and as long as the Mishka team exists, this project will be developed and maintained for free and open source.
- What does the project name mean?
One of the frequently asked questions on social media after the release of the first version of Mishka Chelekom was about the meaning behind the library itself. Here's the explanation:
Mishka means "sparrow."
Chelekom refers to "tree logs that are cut and neatly arranged side by side."
We appreciate any contribution to MishkaChelekom. Just create a PR!! 🎉🥳
- Create issue: https://github.com/mishka-group/mishka_chelekom/issues
- Ask question in elixir forum: https://elixirforum.com ➝ mention
@shahryarjb - Ask question in elixir Slack: https://elixir-slack.community ➝ find
#mishkachannel Link - Ask question in elixir Discord: https://discord.gg/elixir ➝ mention
@shahryarjb - For commercial & sponsoring communication:
shahryar@mishka.tools
You can support this project through the "Sponsor" button on GitHub. All our projects are open-source and free, and we rely on community contributions to enhance and improve them further.
