Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView

License

NotificationsYou must be signed in to change notification settings

mishka-group/mishka_chelekom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Screenshot 2024-10-05 at 01 53 03

LicenseReleasesHex.pm DownloadsGitHub release (with filter)Code Size in BytesIssues

Phoenix & Phoenix LiveView components and UI kit library

    💖 Hey there! If you like my work, pleasesupport me financially! 💖

Why you should use Mishka Chelekom as Phoenix component library

Mishka Chelekom is a powerful library designed to simplify the process of building UI components inPhoenix andPhoenix 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 Ourmix generator), giving you full control over the source code without being locked into any external library.

💼 All components are completely free and open-source.🥂      ForPro support andenterprise services,click here! to get in touch with us.

Mishka Chelekom is a library offering various templates for components inPhoenix andPhoenix LiveView -Phoenix UI kit and components.

This means you can generate any component listed in this project using aCLI command with customizable options.

For example, you can create a component with aninfo color 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 theIgniter library, which makes it easy to update the previous code seamlessly.

You will only use this library in yourdevelopment environment, and it will not have any presence in production.

Installation

defdepsdo[{:mishka_chelekom,"~> 0.0.4",only::dev}]end

Generate all components inside thecomponents directory of your Phoenix project.

Creating a Component (Example: Creating an Alert)

mix mishka.ui.gen.component alert --color info --variant defaultmix mishka.ui.gen.component alert# For Windows users please use `""` when you have more than# one value for an argumentmix mishka.ui.gen.component alert --color"info,danger"

Generating All Components

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

Generating All Components with an Import File

mix mishka.ui.gen.components --import --yesmix 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

# Install all components along with helper functions and macros for importingmix mishka.ui.gen.components --import --helpers --yesmix 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_chelekom
All options

Optionsmishka.ui.gen.component task

  • --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 type
  • --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
  • --yes - Makes directly without questions

Optionsmishka.ui.gen.components task

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

Optionsmishka.ui.add task

  • --no-github - Specifies a URL without github replacing
  • --headers - Specifies a repo url request headers


Optimized for Minimal Dependencies

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

Links:


Our stacks:

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

FAQ

  • 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."


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 areopen-source andfree, and we rely on community contributions to enhance and improve them further.

BTCETHDOGETRX
Donate addresses

BTC:‌

bc1q24pmrpn8v9dddgpg3vw9nld6hl9n5dkw5zkf2c

ETH:

0xD99feB9db83245dE8B9D23052aa8e62feedE764D

DOGE:

DGGT5PfoQsbz3H77sdJ1msfqzfV63Q3nyH

TRX:

TBamHas3wAxSEvtBcWKuT3zphckZo88puz

[8]ページ先頭

©2009-2025 Movatter.jp