<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="331420" data-post-id="331420">
  <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 for sharing, I think javascript is required to implement something like combobox or command, … and I think it would be too complicated to implement with a pure LiveView approach.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="331420" 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/42">Post #41</a>
	                </div>
	            </div>
              <div id="likers-container-331420" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331420"
                     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 #41"></div>
  </section>
</div>
    <div class="postbit" id="331425" data-post-id="331425">
  <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-331425-update-june-14th-1" class="anchor" href="#p-331425-update-june-14th-1" aria-label="Heading link" rel="nofollow"></a>Update June 14th</h1>
<ul>
<li>
<p>Thanks <a class="mention" href="/u/kamaroly" rel="nofollow">@kamaroly</a>, he is helping with setup and add unit test for components. ﻿🎉 That’s a lot of work.</p>
</li>
<li>
<p>Adding new component Hover Card<br>
<a href="https://salad-storybook.fly.dev/salad_ui_component/hover_card" class="inline-onebox" rel="noopener nofollow ugc">Salad UI - Hover Card</a></p>
</li>
</ul>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/3/c/3ce89764c8ac18a9b18e00a01c17a87623756941.png" data-download-href="https://forum.elixirforum.com/uploads/default/3ce89764c8ac18a9b18e00a01c17a87623756941" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/3/c/3ce89764c8ac18a9b18e00a01c17a87623756941_2_690x331.png" alt="image" data-base62-sha1="8GOYk4viceERgJzlIIius1jevtv" width="690" height="331" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/3/c/3ce89764c8ac18a9b18e00a01c17a87623756941_2_690x331.png, https://forum.elixirforum.com/uploads/default/original/3X/3/c/3ce89764c8ac18a9b18e00a01c17a87623756941.png 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/3/c/3ce89764c8ac18a9b18e00a01c17a87623756941.png 2x" data-dominant-color="F6F6F6"><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">894×430 20.8 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="331425" data-batch-url="/posts/batch_likers">
                        8
                      </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/43">Post #42</a>
	                </div>
	            </div>
              <div id="likers-container-331425" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="331425"
                     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 #42"></div>
  </section>
</div>
    <div class="postbit" id="332503" data-post-id="332503">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I beg all UI framework authors to please stop messing with input fields.</p>
<p>A hair-thin light gray border with an even lighter gray text <em>is bad actually</em></p>
<p>This is how you do inputs: <a href="https://design-system.service.gov.uk/components/text-input/" class="inline-onebox" rel="noopener nofollow ugc">Text input – GOV.UK Design System</a></p>
<p>If you don’t like that, make them <em>visible</em></p> 
	            </div>

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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>As a backend developer(original actionscript and java dev…later php) I worked for many many many years with all javascript frameworks and I am so damn happy Liveview allows me to escape this with minimum javascript.</p>
<p>I am sick of all the brands I had to go through:</p>
<ul>
<li>jquery, mootools for starters</li>
<li>then Backbonejs seemed to get hot, so I jumped that bandwagon,</li>
<li>then Angular 1 seemed to get hot, so I needed to jump on that..</li>
<li>then VueJS, EmberJS or ReactJS would become the leading framework…so I needed to pick for the first time. So I picked VueJS and ReactJS, after trying them both.</li>
</ul>
<p>Man.. I don’t even want to talk about all the bloatware that I had to learn/understand/remember/install just to build a javascript file.<br>
…requirejs, babel, webpack, npm, npx, grunt, gulp, rollup, idk.. ugh</p>
<p><strong>TLDR</strong>: Svelte is also such a brand. Another framework, which one day will die out and all our bloated frontends will be infected with this decease. I really hope that we will not have to add anything except pure vanilla javascript…and even keep that to an absolute minimum.<br>
If folks really want to Jabbascript, then folks can always build a SPA and keep the backend and frontend strictly separated and use whatever bloat javascript framework out there.</p> 
	            </div>

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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Awesome initiative <a class="mention" href="/u/bluzky" rel="nofollow">@bluzky</a> !<br>
I’ve been playing with this component library outside of Phoenix and it really has a great philosophy behind 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="332514" 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/46">Post #45</a>
	                </div>
	            </div>
              <div id="likers-container-332514" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332514"
                     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 #45"></div>
  </section>
</div>
    <div class="postbit" id="332542" data-post-id="332542">
  <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 wonder how you used it outside of Phoenix. Could you share a bit?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="332542" 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/47">Post #46</a>
	                </div>
	            </div>
              <div id="likers-container-332542" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332542"
                     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 #46"></div>
  </section>
</div>
    <div class="postbit" id="332543" data-post-id="332543">
  <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>It depends on your favor, you can customize it your way</p> 
	            </div>

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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thank you for this effort , this will make it easier for people coming from the backend side to do the frontend work and fulfill Elixir promise of one stack and one resource <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"><br>
Actually I believe going forward integrating with live components will be the preferred mechanism for many developers to build the frontend</p> 
	            </div>

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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Defaults matter though.</p>
<p>In this case it’s weird to see every single element to have a prominent appearance on the page, bold powerful contrast in all borders, labels, text, etc.</p>
<p>The moment you switch to text input and text area? Invisible pale gray borders and text.</p>
<p>It’s not just shadcn and its re-implementations, mind you. Nearly every single CSS framework has the same issue.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="332548" 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/50">Post #49</a>
	                </div>
	            </div>
              <div id="likers-container-332548" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332548"
                     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 #49"></div>
  </section>
</div>
    <div class="postbit" id="332550" data-post-id="332550">
  <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 think it’s weird if I make the following input bold and strong. what do you think?</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/8/d/8df2f6adf4b10c8421f6cf0f57e6ce90a7ffa8ff.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/8df2f6adf4b10c8421f6cf0f57e6ce90a7ffa8ff" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/8/d/8df2f6adf4b10c8421f6cf0f57e6ce90a7ffa8ff.jpeg" alt="image" data-base62-sha1="kfJRXVouNv23CPhncpz12SRW4Kb" width="690" height="399" data-dominant-color="EEEEEF"><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×694 44.9 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="332550" 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/51">Post #50</a>
	                </div>
	            </div>
              <div id="likers-container-332550" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="332550"
                     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 #50"></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=6">Load more posts (70 remaining)</a>
</div></template></turbo-stream>