<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="330509" data-post-id="330509">
  <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 updated 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="330509" 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/32">Post #31</a>
	                </div>
	            </div>
              <div id="likers-container-330509" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="330509"
                     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 #31"></div>
  </section>
</div>
    <div class="postbit" id="330510" data-post-id="330510">
  <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-330510-updated-june-7th-1" class="anchor" href="#p-330510-updated-june-7th-1" aria-label="Heading link" rel="nofollow"></a>Updated June 7th</h1>
<p>I’ve added a new demo page using SaladUI</p><aside class="onebox allowlistedgeneric" data-onebox-src="https://salad-storybook.fly.dev/demo/dashboard-one">
  <header class="source">

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

  <article class="onebox-body">
    

<h3><a href="https://salad-storybook.fly.dev/demo/dashboard-one" target="_blank" rel="noopener nofollow ugc">SaladStorybook
     · Phoenix Framework</a></h3>



  </article>

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

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

<p><strong>Desktop</strong><br>
</p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/b/6/b60735def72fd20279c09386c25e13530b99f1f2.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/b60735def72fd20279c09386c25e13530b99f1f2" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/b/6/b60735def72fd20279c09386c25e13530b99f1f2_2_690x378.jpeg" alt="image" data-base62-sha1="pYilzli5OPwQuVveKW51zMGGSPM" width="690" height="378" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/b/6/b60735def72fd20279c09386c25e13530b99f1f2_2_690x378.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/b/6/b60735def72fd20279c09386c25e13530b99f1f2_2_1035x567.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/b/6/b60735def72fd20279c09386c25e13530b99f1f2.jpeg 2x" data-dominant-color="FBFBFB"><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×658 25.4 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><strong>Mobile</strong><br>
</p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/4/4/44fee8bbe47a0bc158b260add9ccc303a917945f.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/44fee8bbe47a0bc158b260add9ccc303a917945f" title="Screen Shot 2024-06-06 at 23.21.13" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/4/4/44fee8bbe47a0bc158b260add9ccc303a917945f_2_337x600.jpeg" alt="Screen Shot 2024-06-06 at 23.21.13" data-base62-sha1="9QmBI8bGwn2cyUUlxqYxh652Nun" width="337" height="600" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/4/4/44fee8bbe47a0bc158b260add9ccc303a917945f_2_337x600.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/4/4/44fee8bbe47a0bc158b260add9ccc303a917945f_2_505x900.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/4/4/44fee8bbe47a0bc158b260add9ccc303a917945f_2_674x1200.jpeg 2x" data-dominant-color="F8F8F9"><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">Screen Shot 2024-06-06 at 23.21.13</span><span class="informations">750×1334 35.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>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="330510" data-batch-url="/posts/batch_likers">
                        12
                      </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/33">Post #32</a>
	                </div>
	            </div>
              <div id="likers-container-330510" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="330510"
                     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 #32"></div>
  </section>
</div>
    <div class="postbit" id="330644" data-post-id="330644">
  <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-330644-update-jun-8th-1" class="anchor" href="#p-330644-update-jun-8th-1" aria-label="Heading link" rel="nofollow"></a>Update Jun 8th</h1>
<p><strong>Release SaladUI</strong><br>
I decide to release on Hex: <a href="https://hex.pm/packages/salad_ui" class="inline-onebox" rel="nofollow">salad_ui | Hex</a><br>
I know there are bugs, so please raise an issue on Github if you found one.</p>
<p><strong>Added demo section</strong></p><aside class="onebox allowlistedgeneric" data-onebox-src="https://salad-storybook.fly.dev/examples/demo">
  <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/demo" 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/demo" target="_blank" rel="noopener nofollow ugc">Salad UI - 
      Demo</a></h3>



  </article>

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

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

<p>With some new dashboard example</p>
<p><strong>What’s next</strong></p>
<ul>
<li>I’m building a simple tool to convert from Shadcn React template to heex.</li>
<li>SaladUI provide building blocks to build rich components. So I’m thinking of building some commonly used block to reduce boilerplate code</li>
</ul>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/3/d/3dcbd1cbf3391a25e4879451914d52405f281d7f.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/3dcbd1cbf3391a25e4879451914d52405f281d7f" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/3/d/3dcbd1cbf3391a25e4879451914d52405f281d7f_2_690x379.jpeg" alt="image" data-base62-sha1="8OFO271d8DccVWmwohPBGoZgR1t" width="690" height="379" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/3/d/3dcbd1cbf3391a25e4879451914d52405f281d7f_2_690x379.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/3/d/3dcbd1cbf3391a25e4879451914d52405f281d7f_2_1035x568.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/3/d/3dcbd1cbf3391a25e4879451914d52405f281d7f.jpeg 2x" data-dominant-color="F6F6F8"><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×660 47.7 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>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="330644" 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/34">Post #33</a>
	                </div>
	            </div>
              <div id="likers-container-330644" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="330644"
                     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 #33"></div>
  </section>
</div>
    <div class="postbit" id="330685" data-post-id="330685">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>If I try to open Slider <a href="https://salad-storybook.fly.dev/salad_ui_component/slider" class="inline-onebox" rel="noopener nofollow ugc">Salad UI - Slider</a> it fails with Internal Server Error</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="330685" 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/35">Post #34</a>
	                </div>
	            </div>
              <div id="likers-container-330685" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="330685"
                     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 #34"></div>
  </section>
</div>
    <div class="postbit" id="330705" data-post-id="330705">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Re, select component:<br>
It’s in my plans for a more comprehensive course on that input:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/a/c/ac2cd35635b5e323214d20c7fa66e36da3b15b32.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/ac2cd35635b5e323214d20c7fa66e36da3b15b32" title="alc_select_1400x790" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/a/c/ac2cd35635b5e323214d20c7fa66e36da3b15b32.jpeg" alt="alc_select_1400x790" data-base62-sha1="oz8a7gGuw1zuHaZRnKmGQao39Rg" width="690" height="389" data-dominant-color="E3D0C9"><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">alc_select_1400x790</span><span class="informations">1200×677 31.3 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>I need some help deciding on the “features and so forth” but will most likely try to follow closely to Radix ui.</p>
<p>It’s going to be a headless form web-component. So will be javascript heavy. But consumer friendly.</p>
<p>You can join my community here if you’de like to be notified about it:</p><aside class="onebox allowlistedgeneric" data-onebox-src="https://www.skool.com/2m-simple-web-8788">
  <header class="source">
      <img src="https://assets.skool.com/skool/ed24268642ae417a9b8e3b9827cdd1fd.ico" class="site-icon" alt="" width="229" height="228">

      <a href="https://www.skool.com/2m-simple-web-8788" target="_blank" rel="noopener nofollow ugc">skool.com</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:690/366;"><img src="https://assets.skool.com/f/41cbfea9adb9455f843f4bfbbbde2005/de49d5b5c8aa4953a2c38dc98e11da8e4c652b13c0f24d4c8438607e1ab5cbae" class="thumbnail" alt="" width="690" height="366"></div>

<h3><a href="https://www.skool.com/2m-simple-web-8788" target="_blank" rel="noopener nofollow ugc">Ash Casts</a></h3>

  <p>Community dedicated to developers who leverage Phoenix LiveView and Ash Framework to create products. Join us to share insights, and resources.</p>


  </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="330705" 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/36">Post #35</a>
	                </div>
	            </div>
              <div id="likers-container-330705" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="330705"
                     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 #35"></div>
  </section>
</div>
    <div class="postbit" id="330730" data-post-id="330730">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks for the interesting project!</p>
<p>What I’m playing with now is <a href="https://forum.elixirforum.com/t/livevue-seamless-integration-of-vue-with-phoenix-liveview/63580" rel="nofollow">LiveVue</a> from <a class="mention" href="/u/jskalc" rel="nofollow">@Jskalc</a> together with <a href="https://www.shadcn-vue.com/" rel="noopener nofollow ugc">shadcn-vue</a> which is using Radix UI under the hood.</p>
<p>I’m trying to convert styling into UnoCSS, but with Tailwind it seems to work well and looks really promising! I think to create live_view “proxy” components which would use shadcn-vue more primitive components underneath. It should help with UX a lot, at least in theory, keeping the main logic inside LiveView.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="330730" data-batch-url="/posts/batch_likers">
                        4
                      </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/37">Post #36</a>
	                </div>
	            </div>
              <div id="likers-container-330730" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="330730"
                     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 #36"></div>
  </section>
</div>
    <div class="postbit" id="330743" data-post-id="330743">
  <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>Oh I see the error. Thanks you</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="330743" 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/38">Post #37</a>
	                </div>
	            </div>
              <div id="likers-container-330743" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="330743"
                     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 #37"></div>
  </section>
</div>
    <div class="postbit" id="330746" data-post-id="330746">
  <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>I don’t have much experience with Vue, but I believe that it provides better UX with complicated components such as select, combobox, …</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="330746" 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/39">Post #38</a>
	                </div>
	            </div>
              <div id="likers-container-330746" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="330746"
                     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 #38"></div>
  </section>
</div>
    <div class="postbit" id="330881" data-post-id="330881">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Great work! <img src="https://forum.elixirforum.com/images/emoji/apple/+1.png?v=15" title=":+1:" class="emoji" alt=":+1:" 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="330881" 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/40">Post #39</a>
	                </div>
	            </div>
              <div id="likers-container-330881" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="330881"
                     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 #39"></div>
  </section>
</div>
    <div class="postbit" id="331392" data-post-id="331392">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks for a shoutout <a class="mention" href="/u/heathen" rel="nofollow">@heathen</a> !</p>
<p>In my project I’m also using LiveVue with shadcn-vue. It indeed works quite well and integrating it was a breeze, since Phoenix uses tailwind by default and LiveVue integrates Vite.</p>
<p>Thinking about your idea… it would require a fairly complex interop of LiveView / JavaScript, mostly when it comes to slots and nesting components. I’m not sure if it’s really possible, since vue components woul need to be rendered differently depending if it’s nested inside other component or not (to avoid creating multiple root-level components) <img src="https://forum.elixirforum.com/images/emoji/apple/thinking.png?v=15" title=":thinking:" class="emoji" alt=":thinking:" loading="lazy" width="20" height="20"></p>
<p>But maybe I shouldn’t write here since it’s not the topic for it <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20">  I think integrating client side hooks is a necessity for good UX.  Recently there was a quite huge drama on twitter how LiveViews doesn’t scale because of delay between interaction and change in UI in Hey application. This could be avoided with hooks. Just it’s quite challenging to write complex components using hooks because it’s imperative - you have to control all changes by yourself, there is no way to declare a template and ask library to keep it in sync with the state… that’s why I’ve created LiveVue <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" loading="lazy" width="20" height="20"></p>
<p>But all in all <a class="mention" href="/u/bluzky" rel="nofollow">@bluzky</a> you created something really neat, I’ll be using it in the future!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331392" 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/41">Post #40</a>
	                </div>
	            </div>
              <div id="likers-container-331392" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331392"
                     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 #40"></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=5">Load more posts (80 remaining)</a>
</div></template></turbo-stream>