Home

Awesome

MishkaChelekom

<a href="https://www.buymeacoffee.com/mishkagroup" target="_blank"> <img src="https://img.buymeacoffee.com/button-api/?text=Buy us coffee&emoji=☕&slug=mishkagroup&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" alt="Buy Me A Coffee" height="50" width="210"> </a>

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 CLI command with customizable options.

For example, you can create a component with an info color and a "shadow" variant without having any unnecessary code clutter.

Screenshot 2024-10-05 at 01 53 03

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.

Installation

def deps do
  [
    {:mishka_chelekom, "~> 0.0.1", only: :dev}
  ]
end

Generate all components inside the components directory of your Phoenix project.

Creating a Component (Example: Creating an Alert)

mix mishka.ui.gen.component alert --color info --variant default
mix mishka.ui.gen.component alert

Generating All Components

mix mishka.ui.gen.components
mix mishka.ui.gen.components alert,accordion,chat

Generating All Components with an Import File

mix mishka.ui.gen.components --import --yes
mix mishka.ui.gen.components alert,accordion,chat --import --yes

This command creates all the components along with a file where all the components are imported.

Generating All Components Using an Import File with Helper Functions

mix mishka.ui.gen.components --import --helpers --yes
mix mishka.ui.gen.components alert,accordion,chat --import --helpers --yes
<details> <summary>All options</summary>

Options mishka.ui.gen.component task

Options mishka.ui.gen.components task

Options mishka.ui.add task


</details>

Optimized for Minimal Dependencies

This project ensures optimal performance by minimizing dependencies and leveraging the advanced features of Tailwind CSS.

Links:


Our stacks:

  1. Elixir
  2. Phoenix
  3. Phoenix LiveView
  4. Tailwind CSS
  5. Pure JavaScript

FAQ

The Chelekom library is fully zero-configuration, meaning you don't need to install anything other than the library itself

The generator does all the work for you, from building to updating and transferring the heex, ex files to your Phoenix project.

Just go to the path of your desired Phoenix project and execute the required Mix commands there.

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.

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.


Contributing

We appreciate any contribution to MishkaChelekom. Just create a PR!! 🎉🥳


Community & Support


Donate

You can support this project through the "Sponsor" button on GitHub or via cryptocurrency donations. All our projects are open-source and free, and we rely on community contributions to enhance and improve them further.

BTCETHDOGETRX
<img src="https://mishka.tools/images/donate/BTC.png" width="200"><img src="https://mishka.tools/images/donate/ETH.png" width="200"><img src="https://mishka.tools/images/donate/DOGE.png" width="200"><img src="https://mishka.tools/images/donate/TRX.png" width="200">
<details> <summary>Donate addresses</summary>

BTC:‌

bc1q24pmrpn8v9dddgpg3vw9nld6hl9n5dkw5zkf2c

ETH:

0xD99feB9db83245dE8B9D23052aa8e62feedE764D

DOGE:

DGGT5PfoQsbz3H77sdJ1msfqzfV63Q3nyH

TRX:

TBamHas3wAxSEvtBcWKuT3zphckZo88puz
</details>