Mishka Chelekom - v0.0.8 Tailwind 4 Optimization & New Components with custom config

Your Libraries & OS Mentoring Library Updates
,
1

We are absolutely thrilled to announce the release of version 0.0.8 of Mishka Chelekom! :tada: Hits 16K+ Downloads

This release represents over 21K lines of code changes across our components :gear: :carpentry_saw:

Key Highlights of v0.0.8:

:sparkles: Complete Tailwind 4 Migration: All components now leverage the latest Tailwind CSS capabilities

:wrench: Phoenix 1.8 Optimization: Full compatibility and performance improvements for the latest Phoenix release

:artist_palette: Custom Configuration System: No more manual color adjustments in generated code! Our new config file system enables you to:

  • Generate all components with your custom color palette

  • Implement your own CSS styling (which were defined in this lib components)

  • Achieve complete component customization with ease

:brick: New components and JsHooks: This version has some new components and Infrastructure JsHooks

Support Open Source Development This free and open-source project thrives with community support. If you find value in our work, please consider sponsoring us, even a coffee-sized contribution makes a difference! :hot_beverage:

Please for more information, read this Blog Post:

Repo: GitHub - mishka-group/mishka_chelekom: Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView

Doc: Chelekom - Phoenix & LiveView UI kit and components

Hex: mishka_chelekom | Hex

7 Likes
2

Would it automatically remove all Tailwind stuff in the generated code?

1 Like
3

Hi dear Eiji,
In this version, we’ve moved all color-related styles outside of the components and provided them as examples. The result is a file called mishka_chelekom.css, which is located in the vendor directory of your project. We’ve also added it as an import in app.css.

Every line in that file — which currently contains only color definitions — can be overridden via the config file located in the priv directory.

You can see it in action in the video below:
https://www.youtube.com/watch?v=kVRgVgD9xZ4

The only important point to mention here is that we completely replace the @theme in app.css with our own version.
If you had previously made hardcoded changes to the components, I think those changes might be overwritten. So, it’s a good idea to take a backup beforehand.

If I didn’t fully understand your question, please explain it to me with an example. If the feature you’re referring to doesn’t exist, I’ll definitely consider implementing it in the next release.

Overall, our components are simple .eex files that can be customized using several parameters like color, size, border, and so on.
In previous versions, you could only choose between predefined options. But now, in addition to that, you can completely override any color using the config file.

In new version we will try to move shadow size and etc to config file too

For example, we define these and use it inside html tailwind!

:root {
    --opacity-base: 10;
    --overlay-opacity: 100%;
1 Like
4

Simply you use naming like custom CSS which is often used here and on other forums to refer user-defined CSS usually for the entire site as an alternative to using Tailwind, Bootstrap and any other CSS library/framework. This is a bit confusing especially for developers who do not know anything about your project.

1 Like
5

Yes you are right! I changed this to Implement your own CSS styling (which were defined in this lib components)

Thank you

1 Like
6

If possible, I’d appreciate your help with sharing the post on social media.

Reddit: https://www.reddit.com/r/elixir/comments/1ntdjks/mishka_chelekom_hits_16k_downloads_free/

X(twitter): https://x.com/shahryar_tbiz/status/1972586057943412952

BlueSky: @shahryar-tbiz.bsky.social on Bluesky