Phoenix UI kit and components
One Command, Infinite Creations
mix mishka.ui.gen.component accordion
Too long! Please shorten it.
Phoenix LiveView
Elixir
TailwindCSS
Javascript
Less Code, Faster Development, More Features
1
def
gallery(assigns)
do
2
~H"""
3
<div
4
id={@id}
5
class={[
6
(@type
==
"masonry"
&&
"gallery-masonry")
||
"grid",
7
grid_gap(@gap),
8
@type
==
"masonry"
&&
column_class(@cols),
9
grid_cols(@cols)
!=
"masonry"
&&
grid_cols(@cols),
10
@class
12
]}
11
{@rest}
13
>
14
<%= render_slot(@inner_block)
%>
15
</div>
16
"""
17
end
18
# We've simplified complexity with a single call
19
<.gallery cols="four" gap="large"></.gallery>
1
def
dropdown_trigger(assigns)
do
2
~H"""
3
<div
4
id={@id}
5
phx-click={
6
@trigger_id
&&
7
JS.toggle_class ("show-dropdown",
8
to:
"##{@trigger_id}-dropdown-content",
9
transition:
"duration-100")
10
}
11
class={["cursor-pointer dropdown-trigger", @class]}
12
{@rest}
13
>
14
<%= render_slot(@inner_block)
%>
15
</div>
16
"""
17
end
18
# We've simplified complexity with a single call
19
<.dropdown_trigger
trigger_id="chelekom"></.dropdown_trigger>
Chelekom Components
Why Mishka Chelekom
For Elixir Phoenix & LiveView
Chelekom simplifies development, allowing you to build fast, interactive UIs without needing to handle complex JavaScript frameworks.
Mishka Chelekom comes with a generator that allows you to create any component you need and seamlessly integrate it into your project.
By leveraging advanced Tailwind techniques, fewer payloads are sent to users, resulting in faster performance and a smoother experience.
We simplify usage by reducing external complexity and handling it within the components, making it easier to use while offering more powerful features.
Our components are built on a robust design system, providing you with full access to essential features like custom colors and standard sizing options.
Since all components are fully generated by you, you can easily modify them and adjust the source code directly within your project for complete control.
All current and future components are designed with minimal dependencies, ensuring that in 90% of cases, except for mixed-use scenarios, there's no need to install additional packages.
Since this library operates in the developer environment, components are generated directly into your project. For updates, only components that differ from the new version are highlighted with a diff, allowing you to confirm and update with ease.
Leveraging native Phoenix LiveView features, we minimize server requests by handling operations on the client side wherever possible, ensuring more efficient performance.
With an open-source model and a flexible license, you can use it in your projects without any concerns, ensuring full freedom and reliability.
Connect with us across all social platforms for any issues or needs, especially on GitHub, and the Elixir Slack & forum community, where we're ready to assist quickly.
Chelekom isn't limited to stateless Phoenix components; it fully supports both client-side and server-side components, whether stateful or stateless, with the power of Phoenix LiveView.
The project is fully and professionally documented, allowing you to test it online and easily add code snippets to your project. It also provides developer-specific documentation directly integrated into your main project.
Collaboration
We invite developers to collaborate with us in the development of our Phoenix UI kit and components. If you have an open-source project with high downloads or a strong graphical focus, we'd love to contribute. Sponsors are also welcome to support the project financially, gaining exposure through their contributions.
Our Community
Follow us on the following networks
Our open-source code and product support can be found on our GitHub repository
Stay updated with our latest product news and service updates on Twitter
Watch programming tutorials and Mishka product demos on our YouTube channel
Connect with us on LinkedIn for company insights, career opportunities, and industry updates