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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="budgie" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/budgie/120/31740_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  budgie
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/andyleclair" rel="nofollow">@andyleclair</a> Thank you!!!</p>
<p><a class="mention" href="/u/bluzky" rel="nofollow">@bluzky</a> Had a thought, have you considered changing the name of the project to Shadcn Phoenix or Elixir or something like that? It’s a great project and in my opinion addresses one of the primary weaknesses of Phoenix and Liveview. It might help make the project more discoverable. I also say that because it seems to be the standard pattern for groups making ports of Shadcn, such as shadcn-svelte or shadcn-vue. Looks like <a href="http://shadcn-phoenix.com" rel="noopener nofollow ugc">shadcn-phoenix.com</a> is already taken (registered in august), was that one of you guys?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="345747" 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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/82">Post #81</a>
	                </div>
	            </div>
              <div id="likers-container-345747" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="345747"
                     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 #81"></div>
  </section>
</div>
    <div class="postbit" id="345801" data-post-id="345801">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="bluzky" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bluzky/120/1694_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  bluzky
                    <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>Thanks <a class="mention" href="/u/andyleclair" rel="nofollow">@andyleclair</a>, I’ll play with it</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="345801" 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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/83">Post #82</a>
	                </div>
	            </div>
              <div id="likers-container-345801" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="345801"
                     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 #82"></div>
  </section>
</div>
    <div class="postbit" id="345802" data-post-id="345802">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="bluzky" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bluzky/120/1694_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  bluzky
                    <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>Thank you, I have not registered any domain yet. Regarding the name, I think salad <img src="https://forum.elixirforum.com/images/emoji/apple/green_salad.png?v=15" title=":green_salad:" class="emoji" alt=":green_salad:" loading="lazy" width="20" height="20"> is fun, you can pick any veg you want and add your sauce to make your own salad. <img src="https://forum.elixirforum.com/images/emoji/apple/grinning_face_with_smiling_eyes.png?v=15" title=":grinning_face_with_smiling_eyes:" class="emoji" alt=":grinning_face_with_smiling_eyes:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="345802" 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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/84">Post #83</a>
	                </div>
	            </div>
              <div id="likers-container-345802" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="345802"
                     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 #83"></div>
  </section>
</div>
    <div class="postbit" id="345878" data-post-id="345878">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="bluzky" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bluzky/120/1694_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  bluzky
                    <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">
								<h2><a name="p-345878-upgrade-generated-corecomponents-with-saladui-1" class="anchor" href="#p-345878-upgrade-generated-corecomponents-with-saladui-1" aria-label="Heading link" rel="nofollow"></a>Upgrade generated <code>CoreComponents</code> with SaladUI</h2>
<p>For those who want to try <code>SaladUI</code> quickly, here are some simple steps:</p>
<ol>
<li>Install Salad UI as a library</li>
</ol>
<pre data-code-wrap="elixir"><code class="lang-elixir">mix salad.init --as-lib
</code></pre>
<ol start="2">
<li>Backup your CoreComponents and replace with following code (remember to replace SaladStorybookWeb with your app prefix)<br>
<a href="https://github.com/bluzky/salad_storybook/blob/main/lib/salad_storybook_web/components/core_components.ex" class="inline-onebox" rel="noopener nofollow ugc">salad_storybook/lib/salad_storybook_web/components/core_components.ex at main · bluzky/salad_storybook · GitHub</a></li>
<li>Tada, start your app and check the result</li>
</ol>
<p>You can check the storybook here <a href="https://salad-storybook.fly.dev/core_components/button" rel="noopener nofollow ugc">Core Component</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="345878" data-batch-url="/posts/batch_likers">
                        6
                      </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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/85">Post #84</a>
	                </div>
	            </div>
              <div id="likers-container-345878" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="345878"
                     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 #84"></div>
  </section>
</div>
    <div class="postbit" id="347317" data-post-id="347317">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="bluzky" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bluzky/120/1694_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  bluzky
                    <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">
								<h1><a name="p-347317-update-23-nov-1" class="anchor" href="#p-347317-update-23-nov-1" aria-label="Heading link" rel="nofollow"></a>Update 23 Nov</h1>
<p>Hi friends,<br>
I’m so excited to share some demo of sidebar component. It’s a big component so there must be many bugs. There are also some limitations that I still not be able to solve. Dropdown menu not work in the sidebar content is an know issue.</p>
<p>Please take a look and share your feedback.<br>
Thank you</p>
<h2><a name="p-347317-sidebar-demohttpssalad-storybookflydevexamplessidebar-2" class="anchor" href="#p-347317-sidebar-demohttpssalad-storybookflydevexamplessidebar-2" aria-label="Heading link" rel="nofollow"></a><a href="https://salad-storybook.fly.dev/examples/sidebar" rel="noopener nofollow ugc">Sidebar demo</a></h2>
<p><a href="https://gifyu.com/image/SGhdu" rel="noopener nofollow ugc"><img src="https://s11.gifyu.com/images/SGhdu.gif" alt="SGhdu.gif" width="" height=""></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="347317" data-batch-url="/posts/batch_likers">
                        9
                      </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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/86">Post #85</a>
	                </div>
	            </div>
              <div id="likers-container-347317" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347317"
                     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 #85"></div>
  </section>
</div>
    <div class="postbit" id="347377" data-post-id="347377">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kamaroly" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kamaroly/120/29371_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kamaroly
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Awesome! I can’t wait to test it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="347377" 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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/87">Post #86</a>
	                </div>
	            </div>
              <div id="likers-container-347377" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347377"
                     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 #86"></div>
  </section>
</div>
    <div class="postbit" id="347551" data-post-id="347551">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="bluzky" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bluzky/120/1694_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  bluzky
                    <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">
								<h1><a name="p-347551-release-0140-1" class="anchor" href="#p-347551-release-0140-1" aria-label="Heading link" rel="nofollow"></a>Release 0.14.0</h1>
<p>After a few week fighting with sidebar component, today SaladUI 0.14.0 is released with a few interesting updates</p>
<p><strong>Changes</strong></p>
<ul>
<li>Implement <a href="https://salad-storybook.fly.dev/examples/sidebar" rel="noopener nofollow ugc">Sidebar component</a></li>
<li>Introduce <code>as_child</code> tag to merge multiple <code>SaladUI</code> tag</li>
<li>Introduce <code>dynamic</code> tag which allow dynamic rendering a tag.</li>
</ul>
<p><strong>Breaking changes</strong></p>
<ul>
<li>Replace <code>tails</code> by <code>tw_merge</code> which extracted from <code>turboprop</code>. You have to add <code>TwMerge.Cache</code> to children list in your <code>application.ex</code></li>
<li><code>Collapsible</code> component doesn’t use builder anymore.</li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="347551" data-batch-url="/posts/batch_likers">
                        9
                      </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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/88">Post #87</a>
	                </div>
	            </div>
              <div id="likers-container-347551" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347551"
                     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 #87"></div>
  </section>
</div>
    <div class="postbit" id="347572" data-post-id="347572">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="namxam" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/namxam/120/29270_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  namxam
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/bluzky" rel="nofollow">@bluzky</a> I really like your library. But I just stumbled upon a requirement I am not 100% sure how to solve. I have a tab UI which contains some heavy content pages. I would prefer to load them dynamically, but right now I am not sure how to do that. Or am I missing something?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="347572" 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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/89">Post #88</a>
	                </div>
	            </div>
              <div id="likers-container-347572" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347572"
                     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 #88"></div>
  </section>
</div>
    <div class="postbit" id="347579" data-post-id="347579">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="bluzky" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bluzky/120/1694_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  bluzky
                    <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>You’re right, I should add option to manually handle tab click from backend. Pls open an issue on Github</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="347579" 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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/90">Post #89</a>
	                </div>
	            </div>
              <div id="likers-container-347579" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347579"
                     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 #89"></div>
  </section>
</div>
    <div class="postbit" id="347650" data-post-id="347650">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="arcyfelix" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/arcyfelix/120/13683_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  arcyfelix
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>The library is fantastic.<br>
I think I found a bug, where the source code of the Sidebar is not available.</p><aside class="onebox allowlistedgeneric" data-onebox-src="https://salad-storybook.fly.dev/examples/sidebar">
  <header class="source">
      <img src="https://salad-storybook.fly.dev/storybook/assets/favicon/favicon-32x32.png" class="site-icon" alt="" width="32" height="32">

      <a href="https://salad-storybook.fly.dev/examples/sidebar" target="_blank" rel="noopener nofollow ugc">salad-storybook.fly.dev</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://salad-storybook.fly.dev/examples/sidebar" target="_blank" rel="noopener nofollow ugc">Salad UI - 
      Sidebar</a></h3>



  </article>

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

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

<p>Anyway, could contribute?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="347650" 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/saladui-phoenix-liveview-components-inspired-by-shadui/63775/91">Post #90</a>
	                </div>
	            </div>
              <div id="likers-container-347650" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="347650"
                     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 #90"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/63775/load_more?page=10">Load more posts (30 remaining)</a>
</div></template></turbo-stream>