Mishka Chelekom - Phoenix and LiveView UI kit and components

Release of Version 0.0.1

• Release of foundational components with no dependencies on JavaScript or phx-hook.
• Support for primary colors and light mode.
• Aggregated into 43 groups, featuring over 80 components.
• Support for mix tasks to build components.
• No need to add custom CSS or configure Tailwind plugins.
• Full support of RTL, LTR (English, Persian, Arabic were tested)

Release Blog for Version 0.0.1

Roadmap Page https://mishka.tools/chelekom/docs/roadmap

Coming soon: complete color updates and dark mode integration

Recommendation:

For the latest stable version, you can always use the master branch until the library reaches full stability.

Link to this Version on Hex.pm mishka_chelekom | Hex

Please feel free to create an issue on GitHub if you find any component issues. We truly appreciate your support, and we look forward to collaborating with you, our valued developers.

Awesome work Thanks for the contribution, there are some components that I’ll use for sure.

I’m not very well versed in UI component libraries, hence my question: how does it compare with SaladUI or Doggo libraries? As far as I understand some of these libraries strive to be independent of the CSS framework or focus on HTML semantics. What are the design choices of Chelekom in this regard?

Also, what does Chelekom means?

Cheers!

Hi Dear @tangui, I am very encouraged to see your comments and thank you for your supports.

Before explaining the approach we followed. We have included some items in the document

At the beginning of this project, our main focus was to create a library that backend developers and people with limited knowledge of CSS, HTML, and especially Tailwind could easily use. So instead of leaving too many options for users to handle, we decided to implement most of the features ourselves. All you need to do is call the component.

Along the way, we aimed to eliminate the need for installing all components at once. Instead, you can add only the components you need, with the specific options you want, directly to your Phoenix project as you go.

Our general approach in the first phase was to avoid using JavaScript altogether. We focused on leveraging advanced Tailwind features as much as possible to meet requirements in an isolated way, with minimal configuration required on your end. This approach forms the foundation of our library.

In this phase, all components are stateless, but we’re gradually moving towards live components for the next stages. To the extent possible, we’ve only used HTML, Tailwind, and Phoenix LiveView’s own JS modules.

We will soon be reviewing all colors and providing high-quality support for both dark mode and light mode. We’ve also established a solid agreement with a graphic designer to ensure this.

It’s worth noting that we have our own design system, which includes standardized sizes, spacing, and color naming conventions. Thanks to the CLI, you can edit any component in your project whenever you like. These unique capabilities are powered by the Igniter project.

Lots of work in there. Good on ya.

Have you considered using text-primary etc or css variables to avoid hardcoding the same colours all over the codebase and allowing customisayion?

The syntax in the code examples on the homepage is incorrect.

Please consider reducing the line spacing for the text in the documentation. It’s very hard to read when each line looks like a new paragraph.

Hello dear friend @cmo . Thank you so much for reviewing the project. It’s great that we can understand the criticisms and issues and work to resolve them.

Regarding hardcoding, in the next three versions, we plan to enable plugin conversion within the Tailwind configuration itself through a mix task, or by creating a configuration file directly in Elixir and etc.
For now, the focus is on adding core components and reviewing colors, but we will definitely implement this. The workload has been quite heavy, and it took a lot of time.

Ohh sorry good catch if you are talking about Mishka Installer, i will fix it soon.

I think the long distance (spacing) in the text of the document is because of my poor eyesight I will definitely reduce it in an hour

Thank you thank you thank you

I’m talking about the examples on the Chelekom homepage (Chelekom - Phoenix & LiveView UI kit and components). See the class attribute on the gallery example and the phx-click on the other.

I am interested in the answer as well (as the naming of all packages in the Elixir ecosystem interest me).

Ohhh I missed it :)) sorry @tangui

Part of our team speaks Persian, but these two words, which are the names of the entire site and the package, are not Persian. They are from my native language, spoken in the northern region of my country.

‘Mishka’ means ‘sparrow,’ and ‘Chelekom’ refers to the concept of arranging cut wood or prepared logs neatly side by side (They must be neat).

Quite funny, in many Eastern European languages “mishka” means “mouse”.

So funny. we have to declare it as a free take like a movie. Everyone has a meaning based on where they live