<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="389223" data-post-id="389223">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="shahryarjb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/shahryarjb/120/39485_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  shahryarjb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hello Elixir community friends! <img src="https://forum.elixirforum.com/images/emoji/apple/raising_hands.png?v=15" title=":raising_hands:" class="emoji" alt=":raising_hands:" loading="lazy" width="20" height="20"><br>
In our first Beta release, we added several new components and improved MCP—no more need for separate server setup (<a href="https://github.com/mishka-group/mishka_chelekom/issues/480" rel="noopener nofollow ugc">issue</a>). Update now! <img src="https://forum.elixirforum.com/images/emoji/apple/rocket.png?v=15" title=":rocket:" class="emoji" alt=":rocket:" loading="lazy" width="20" height="20"></p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://hex.pm/packages/mishka_chelekom/0.0.9-beta.1">
  <header class="source">
      <img src="https://hex.pm/images/hex-full-a8183c4f9adac71516516d107d402b18.svg?vsn=d" class="site-icon" alt="" width="136" height="120">

      <a href="https://hex.pm/packages/mishka_chelekom/0.0.9-beta.1" target="_blank" rel="noopener nofollow">Hex</a>
  </header>

  <article class="onebox-body">
    <img width="160" height="160" src="https://hex.pm/images/favicon-160-3770bc59f1f8ba7656b4db5a1eacd8e3.png?vsn=d" class="thumbnail onebox-avatar" alt="">

<h3><a href="https://hex.pm/packages/mishka_chelekom/0.0.9-beta.1" target="_blank" rel="noopener nofollow">mishka_chelekom</a></h3>

  <p>Mishka Chelekom is a fully featured components and UI kit library for Phoenix &amp; Phoenix LiveView</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p><strong>Please support Mishka Chelekom. Support has dropped significantly recently <img src="https://forum.elixirforum.com/images/emoji/apple/pensive_face.png?v=15" title=":pensive_face:" class="emoji" alt=":pensive_face:" loading="lazy" width="20" height="20"></strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">{:mishka_chelekom, "~&gt; 0.0.9-beta.1", only: :dev}
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="389223" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mishka-chelekom-phoenix-and-liveview-ui-kit-and-components/67050/52">Post #51</a>
	                </div>
	            </div>
              <div id="likers-container-389223" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="389223"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #51"></div>
  </section>
</div>
    <div class="postbit" id="390809" data-post-id="390809">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="shahryarjb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/shahryarjb/120/39485_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  shahryarjb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><img src="https://forum.elixirforum.com/images/emoji/apple/rocket.png?v=15" title=":rocket:" class="emoji" alt=":rocket:" loading="lazy" width="20" height="20"> Dear Elixir developers! <img src="https://forum.elixirforum.com/images/emoji/apple/purple_heart.png?v=15" title=":purple_heart:" class="emoji" alt=":purple_heart:" loading="lazy" width="20" height="20"><br>
Please help test <a href="https://mishka.tools/chelekom" rel="noopener nofollow ugc">Mishka Chelekom</a> Headless Components! Your feedback will help us find bugs and get ready for release. <img src="https://forum.elixirforum.com/images/emoji/apple/bug.png?v=15" title=":bug:" class="emoji" alt=":bug:" loading="lazy" width="20" height="20"><img src="https://forum.elixirforum.com/images/emoji/apple/sparkles.png?v=15" title=":sparkles:" class="emoji" alt=":sparkles:" loading="lazy" width="20" height="20"></p>
<p>Our biggest release yet is almost here, with even more features on the way! <img src="https://forum.elixirforum.com/images/emoji/apple/tada.png?v=15" title=":tada:" class="emoji" alt=":tada:" loading="lazy" width="20" height="20"><img src="https://forum.elixirforum.com/images/emoji/apple/fire.png?v=15" title=":fire:" class="emoji" alt=":fire:" loading="lazy" width="20" height="20"></p>
<p>Thanks for your support! <img src="https://forum.elixirforum.com/images/emoji/apple/raising_hands.png?v=15" title=":raising_hands:" class="emoji" alt=":raising_hands:" loading="lazy" width="20" height="20"></p>
<div class="d-image-grid">
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/3/0/30371cd0b32fe2f7930daa102ba04630d1f08396.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/30371cd0b32fe2f7930daa102ba04630d1f08396" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/3/0/30371cd0b32fe2f7930daa102ba04630d1f08396.jpeg" alt="image" data-base62-sha1="6SwZNiv0LDpFXmgbdAndvNArI9M" width="690" height="462" data-dominant-color="ECECEC"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1200×804 41.6 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
</div>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/sparkles.png?v=15" title=":sparkles:" class="emoji" alt=":sparkles:" loading="lazy" width="20" height="20"> This beta includes a development Phoenix app with examples for every component. <img src="https://forum.elixirforum.com/images/emoji/apple/package.png?v=15" title=":package:" class="emoji" alt=":package:" loading="lazy" width="20" height="20"></p>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/tada.png?v=15" title=":tada:" class="emoji" alt=":tada:" loading="lazy" width="20" height="20"> Even better, all Base UI components are now fully available with their original styling, ready to explore, test, and use in your projects. <img src="https://forum.elixirforum.com/images/emoji/apple/rocket.png?v=15" title=":rocket:" class="emoji" alt=":rocket:" loading="lazy" width="20" height="20"></p>
<div class="d-image-grid">
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/2/0/20a7a0e649f8ba24f2e335b44b4a05e6ef8817ba.png" data-download-href="https://forum.elixirforum.com/uploads/default/20a7a0e649f8ba24f2e335b44b4a05e6ef8817ba" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/2/0/20a7a0e649f8ba24f2e335b44b4a05e6ef8817ba.png" alt="image" data-base62-sha1="4ESq8cEPZSFZWUJnsYU9CBOgp5w" width="690" height="669" data-dominant-color="F2F2F3"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">825×800 25.2 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/e/6/e672a5eef44fc242f137a5d513ab488e61e0de7e.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/e672a5eef44fc242f137a5d513ab488e61e0de7e" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/e/6/e672a5eef44fc242f137a5d513ab488e61e0de7e.jpeg" alt="image" data-base62-sha1="wSDrWQ0g0Qgh7PcCEscAA7K8uKy" width="690" height="450" data-dominant-color="EDECEC"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1172×765 40.1 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
</div>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/light_bulb.png?v=15" title=":light_bulb:" class="emoji" alt=":light_bulb:" loading="lazy" width="20" height="20"> What does this mean? It’s the biggest step forward for Mishka Chelekom!</p>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/sparkles.png?v=15" title=":sparkles:" class="emoji" alt=":sparkles:" loading="lazy" width="20" height="20"> You can now bring external styles into Mishka Chelekom, and over time, more components will be added to the Headless edition following the RFC process. <img src="https://forum.elixirforum.com/images/emoji/apple/rocket.png?v=15" title=":rocket:" class="emoji" alt=":rocket:" loading="lazy" width="20" height="20"></p>
<p><img src="https://forum.elixirforum.com/images/emoji/apple/heart.png?v=15" title=":heart:" class="emoji" alt=":heart:" loading="lazy" width="20" height="20"> This project truly needs your financial support. Right now, we receive less than $40/month in donations, and every contribution helps us keep building<br>
Sponsor: <a href="https://github.com/sponsors/mishka-group" class="inline-onebox" rel="noopener nofollow ugc">Sponsor @mishka-group on GitHub Sponsors · GitHub</a><br>
Repo: <a href="https://github.com/mishka-group/mishka_chelekom" class="inline-onebox" rel="noopener nofollow ugc">GitHub - mishka-group/mishka_chelekom: Mishka Chelekom is a fully featured components and UI kit library for Phoenix &amp; Phoenix LiveView · GitHub</a></p>
<p><strong>Try it</strong> <code>￼{:mishka_chelekom, "~&gt; 0.0.9-beta.3", only: :dev}￼</code></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="390809" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mishka-chelekom-phoenix-and-liveview-ui-kit-and-components/67050/53">Post #52</a>
	                </div>
	            </div>
              <div id="likers-container-390809" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="390809"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #52"></div>
  </section>
</div>
    <div class="postbit" id="391166" data-post-id="391166">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="shahryarjb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/shahryarjb/120/39485_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  shahryarjb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi dear friends, i released the first RC version of Mishka Chelekom, please help to test this version</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">{:mishka_chelekom, "~&gt; 0.0.9-rc.1", only: :dev}
</code></pre>
<p>For creating headless components you can use these</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">mix mishka.ui.gen.headless.components
</code></pre>
<p>for a specific component</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">mix mishka.ui.gen.headless dialog
</code></pre>
<p>Consider all examples exist inside the repo the <a href="https://github.com/mishka-group/mishka_chelekom/tree/master/development" rel="noopener nofollow ugc">development</a> dir, it is just a normal phoenix, install deps and run it!<br>
all examples have extra example which created by Base UI style</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="391166" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mishka-chelekom-phoenix-and-liveview-ui-kit-and-components/67050/54">Post #53</a>
	                </div>
	            </div>
              <div id="likers-container-391166" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="391166"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #53"></div>
  </section>
</div>
    <div class="postbit" id="391944" data-post-id="391944">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="shahryarjb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/shahryarjb/120/39485_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  shahryarjb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>It’s still early, but we’re very likely to achieve our goal.</p>
<p>The next version we will support Elixir mobile framework (Mob). With the Mishka Chelekom CLI, you’ll have a single tool for building UI wherever you need it. One CLI for everything.</p>
<p>Draft PR: <a href="https://github.com/mishka-group/mishka_chelekom/pull/495" class="inline-onebox" rel="noopener nofollow ugc">feat(mob): port all headless components to Mob, with a CLI to generate them by shahryarjb · Pull Request #495 · mishka-group/mishka_chelekom · GitHub</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="391944" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mishka-chelekom-phoenix-and-liveview-ui-kit-and-components/67050/55">Post #54</a>
	                </div>
	            </div>
              <div id="likers-container-391944" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="391944"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #54"></div>
  </section>
</div>
    <div class="postbit" id="392101" data-post-id="392101">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="shahryarjb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/shahryarjb/120/39485_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  shahryarjb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><img src="https://forum.elixirforum.com/images/emoji/apple/rocket.png?v=15" title=":rocket:" class="emoji" alt=":rocket:" loading="lazy" width="20" height="20"> New experimental Mishka Chelekom release! Added 38 headless Elixir components converted from Mantine Dev. <img src="https://forum.elixirforum.com/images/emoji/apple/tada.png?v=15" title=":tada:" class="emoji" alt=":tada:" loading="lazy" width="20" height="20"></p>
<p>A major update, your testing and feedback are greatly appreciated. <img src="https://forum.elixirforum.com/images/emoji/apple/raising_hands.png?v=15" title=":raising_hands:" class="emoji" alt=":raising_hands:" loading="lazy" width="20" height="20"></p>
<p>Just a few steps left to reach 200 components! <img src="https://forum.elixirforum.com/images/emoji/apple/flexed_biceps.png?v=15" title=":flexed_biceps:" class="emoji" alt=":flexed_biceps:" loading="lazy" width="20" height="20"><img src="https://forum.elixirforum.com/images/emoji/apple/fire.png?v=15" title=":fire:" class="emoji" alt=":fire:" loading="lazy" width="20" height="20"></p>
<p><strong>Install:</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">{:mishka_chelekom, "~&gt; 0.0.10-alpha.5", only: :dev}
</code></pre>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/d/b/dbfc19b339efe549bfd858db32135f06ef8e8cc6.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/dbfc19b339efe549bfd858db32135f06ef8e8cc6" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/d/b/dbfc19b339efe549bfd858db32135f06ef8e8cc6.jpeg" alt="image" data-base62-sha1="vo4GH4DPuCDAXp4yIrLbARwoeuG" width="690" height="463" data-dominant-color="ECECEC"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1186×797 40.1 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>PR:</p>
<aside class="onebox githubpullrequest" data-onebox-src="https://github.com/mishka-group/mishka_chelekom/pull/492">
  <header class="source">

      <a href="https://github.com/mishka-group/mishka_chelekom/pull/492" target="_blank" rel="noopener nofollow ugc">github.com/mishka-group/mishka_chelekom</a>
  </header>

  <article class="onebox-body">
    <div class="github-row" data-github-private-repo="false">



    <div class="github-icon-container" title="Pull Request">
      <svg width="60" height="60" class="github-icon" viewBox="0 0 12 16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
    </div>

  <div class="github-info-container">



      <h4>
        <a href="https://github.com/mishka-group/mishka_chelekom/pull/492" target="_blank" rel="noopener nofollow ugc">Convert mantine components as headless (#492)</a>
      </h4>

    <div class="branches">
      <code>master</code> ← <code>sha-mantain</code>
    </div>

      <div class="github-info">
        <div class="date">
          opened <span class="discourse-local-date" data-format="ll" data-date="2026-07-18" data-time="05:02:18" data-timezone="UTC">05:02AM - 18 Jul 26 UTC</span>
        </div>

        <div class="user">
          <a href="https://github.com/shahryarjb" target="_blank" rel="noopener nofollow ugc">
            <img alt="" src="https://avatars.githubusercontent.com/u/8413604?v=4" class="onebox-avatar-inline" width="20" height="20">
            shahryarjb
          </a>
        </div>

        <div class="lines" title="89 commits changed 277 files with 19246 additions and 1739 deletions">
          <a href="https://github.com/mishka-group/mishka_chelekom/pull/492/files" target="_blank" rel="noopener nofollow ugc">
            <span class="added">+19246</span>
            <span class="removed">-1739</span>
          </a>
        </div>
      </div>
  </div>
</div>

  <div class="github-row">
    <p class="github-body-container">Thanks mantine.dev

Fixed #179</p>
  </div>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="392101" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mishka-chelekom-phoenix-and-liveview-ui-kit-and-components/67050/56">Post #55</a>
	                </div>
	            </div>
              <div id="likers-container-392101" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="392101"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #55"></div>
  </section>
</div>
    <div class="postbit" id="392475" data-post-id="392475">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="shahryarjb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/shahryarjb/120/39485_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  shahryarjb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Mishka Chelekom beta now offers the most complete <a class="hashtag-cooked" href="/tag/elixir/1559" data-type="tag" data-slug="elixir" data-id="1559" data-style-type="icon" data-icon="tag" rel="nofollow"><span class="hashtag-icon-placeholder"><svg class="fa d-icon d-icon-square-full svg-icon svg-node"><use href="#square-full"></use></svg></span><span>elixir</span></a> UI Kit and HEEx components, easily installed via CLI! <img src="https://forum.elixirforum.com/images/emoji/apple/rocket.png?v=15" title=":rocket:" class="emoji" alt=":rocket:" loading="lazy" width="20" height="20"><br>
• 100+ styled components<br>
• 78+ unstyled components<br>
• 70+ Mob framework components for Android &amp; iOS apps <img src="https://forum.elixirforum.com/images/emoji/apple/sparkles.png?v=15" title=":sparkles:" class="emoji" alt=":sparkles:" loading="lazy" width="20" height="20"></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">{:mishka_chelekom, "~&gt; 0.0.10-alpha.6", only: :dev}
</code></pre>
<p>PR:</p>
<aside class="onebox githubpullrequest" data-onebox-src="https://github.com/mishka-group/mishka_chelekom/pull/495">
  <header class="source">

      <a href="https://github.com/mishka-group/mishka_chelekom/pull/495" target="_blank" rel="noopener nofollow ugc">github.com/mishka-group/mishka_chelekom</a>
  </header>

  <article class="onebox-body">
    <div class="github-row" data-github-private-repo="false">



    <div class="github-icon-container" title="Pull Request">
      <svg width="60" height="60" class="github-icon" viewBox="0 0 12 16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
    </div>

  <div class="github-info-container">



      <h4>
        <a href="https://github.com/mishka-group/mishka_chelekom/pull/495" target="_blank" rel="noopener nofollow ugc">feat(mob): port all headless components to Mob, with a CLI to generate them (#495)</a>
      </h4>

    <div class="branches">
      <code>master</code> ← <code>mob-showcase</code>
    </div>

      <div class="github-info">
        <div class="date">
          opened <span class="discourse-local-date" data-format="ll" data-date="2026-07-24" data-time="16:33:17" data-timezone="UTC">04:33PM - 24 Jul 26 UTC</span>
        </div>

        <div class="user">
          <a href="https://github.com/shahryarjb" target="_blank" rel="noopener nofollow ugc">
            <img alt="" src="https://avatars.githubusercontent.com/u/8413604?v=4" class="onebox-avatar-inline" width="20" height="20">
            shahryarjb
          </a>
        </div>

        <div class="lines" title="258 commits changed 1140 files with 133165 additions and 13105 deletions">
          <a href="https://github.com/mishka-group/mishka_chelekom/pull/495/files" target="_blank" rel="noopener nofollow ugc">
            <span class="added">+133165</span>
            <span class="removed">-13105</span>
          </a>
        </div>
      </div>
  </div>
</div>

  <div class="github-row">
    <p class="github-body-container">Ports Mishka Chelekom's headless components to [Mob](https://github.com/GenericJ<span class="show-more-container"><a href="https://github.com/mishka-group/mishka_chelekom/pull/495" target="_blank" rel="noopener nofollow ugc" class="show-more">…</a></span><span class="excerpt hidden">am/mob) (BEAM-on-device), and adds a `:mob` layer to the generator so apps can install them from the CLI.

**72 of 73 components**, each with a gallery page, tests and its own commit. Only `editor` is unported — it wraps TipTap/ProseMirror, and it is the only one of the 73 needing an external JS package.

```bash
mix mishka.ui.gen.mob drawer
mix mishka.ui.gen.mob.components
mix mishka.ui.gen.mob.kit
```

Components are native — a node tree of platform widgets Compose and SwiftUI render directly — so the generator installs no npm packages and touches no stylesheet. Two things it does that the headless generator does not: Mob components reference each other in code, so `necessary:` resolves ~20 dependency chains, and a composite-tag registry is maintained in `lib/&lt;app&gt;/components.ex`.

`priv/mob` is **derived** from `development/mob` (a real Mob app with a showcase and test suite) via `mix mishka.mob.sync`, rather than hand-maintained, so the two cannot drift.

Where the platform genuinely cannot do something, the moduledoc says so instead of faking it: no pointer coordinates (drawn controls pair with a native slider reading the same number), no geometry reporting, no animation, and no accessibility semantics — which is why `visually_hidden` renders nothing and exposes `announce?/0 == false`. Two walls turned out to be movable: `Mob.Canvas` (real spectra, checkerboards and dials) and `TextField`, which gained a `lines` prop so `json_input` could be a real textarea.</span></p>
  </div>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="392475" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/mishka-chelekom-phoenix-and-liveview-ui-kit-and-components/67050/57">Post #56</a>
	                </div>
	            </div>
              <div id="likers-container-392475" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="392475"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>