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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Can’t wait to use v1</p>
<p>Is there a way to access v0 storybook?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="366224" 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/112">Post #111</a>
	                </div>
	            </div>
              <div id="likers-container-366224" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="366224"
                     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 #111"></div>
  </section>
</div>
    <div class="postbit" id="366231" data-post-id="366231">
  <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>Currently I can only host 1 demo version to fly using its free plan. You can checkout salad storybook feature/sidebar-7 branch</p>
<p>That is version before I merge accessibility branch.</p> 
	            </div>

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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="pvmkarlsson" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  pvmkarlsson
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>That looks fantastic! Would love a boilerplate project with your dashboard demo, so you can see how all components work and goes together in the live view etc.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="366410" 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/114">Post #113</a>
	                </div>
	            </div>
              <div id="likers-container-366410" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="366410"
                     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 #113"></div>
  </section>
</div>
    <div class="postbit" id="367222" data-post-id="367222">
  <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>Yay, It’s a simple project, because I don’t have much time for it. <img src="https://forum.elixirforum.com/images/emoji/apple/frowning.png?v=15" title=":frowning:" class="emoji" alt=":frowning:" 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="367222" 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/115">Post #114</a>
	                </div>
	            </div>
              <div id="likers-container-367222" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="367222"
                     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 #114"></div>
  </section>
</div>
    <div class="postbit" id="367223" data-post-id="367223">
  <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-367223-saladui-v1-beta-is-release-1" class="anchor" href="#p-367223-saladui-v1-beta-is-release-1" aria-label="Heading link" rel="nofollow"></a>SaladUI v1 Beta is release</h1>
<p>Hi folks,</p>
<p>I’ve released SaladUI v1 beta with revamped components which backed by Phoenix Hook to support better for accessibility.<br>
Please help me to play with it and report any issue you meet.</p>
<p>I also add guide to build new component here: <a href="https://hexdocs.pm/salad_ui/1.0.0-beta.2/implement_simple_component.html" class="inline-onebox" rel="noopener nofollow ugc">Quick Simple Component Guide — SaladUI v1.0.0-beta.2</a></p>
<p>Any suggestion are better than welcomed. I think it’s quite complicated now.</p>
<p>Github repo for those are missing: <a href="https://github.com/bluzky/salad_ui" class="inline-onebox" rel="noopener nofollow ugc">GitHub - bluzky/salad_ui: Phoenix Liveview component library inspired by shadcn UI · GitHub</a></p>
<p>Thank 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="367223" data-batch-url="/posts/batch_likers">
                        11
                      </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/116">Post #115</a>
	                </div>
	            </div>
              <div id="likers-container-367223" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="367223"
                     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 #115"></div>
  </section>
</div>
    <div class="postbit" id="369195" data-post-id="369195">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I put together a Linear/Notion/Airtable style composable filter builder for LiveView with sharable url params that uses Salad UI. Useful for admin frameworks like OrangeCMS and typical B2B index pages (not limited to table views):</p>
<p><a href="https://livefilter.fly.dev/todos?filters%5Bassigned_to%5D%5Boperator%5D=in&amp;filters%5Bassigned_to%5D%5Btype%5D=enum&amp;filters%5Bassigned_to%5D%5Bvalues%5D%5B0%5D=jane_smith&amp;filters%5Bstatus%5D%5Boperator%5D=in&amp;filters%5Bstatus%5D%5Btype%5D=enum&amp;filters%5Bstatus%5D%5Bvalues%5D%5B0%5D=in_progress&amp;filters%5Btags%5D%5Boperator%5D=contains_any&amp;filters%5Btags%5D%5Btype%5D=array&amp;filters%5Btags%5D%5Bvalues%5D%5B0%5D=bug" rel="noopener nofollow ugc">https://livefilter.fly.dev/todos?filters%5Bassigned_to%5D%5Boperator%5D=in&amp;filters%5Ba[…]5D%5Btype%5D=array&amp;filters%5Btags%5D%5Bvalues%5D%5B0%5D=bug</a></p>
<p>Docs: <a href="https://hex.pm/packages/livefilter" class="inline-onebox" rel="nofollow">livefilter | Hex</a></p>
<p>Reference app: <a href="https://github.com/cpursley/livefilter-demo" rel="noopener nofollow ugc">https://github.com/cpursley/livefilter-demo</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="369195" 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/117">Post #116</a>
	                </div>
	            </div>
              <div id="likers-container-369195" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="369195"
                     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 #116"></div>
  </section>
</div>
    <div class="postbit" id="369285" data-post-id="369285">
  <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>Your work is awesome</p> 
	            </div>

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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Looks awesome. <img src="https://forum.elixirforum.com/images/emoji/apple/waving_hand.png?v=15" title=":waving_hand:" class="emoji" alt=":waving_hand:" loading="lazy" width="20" height="20"></p>
<p><a href="https://salad-storybook.fly.dev/salad_ui_component/breadcrumb" rel="noopener nofollow ugc">https://salad-storybook.fly.dev/salad_ui_component/breadcrumb</a> (returns an 500 internal 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="369408" 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/119">Post #118</a>
	                </div>
	            </div>
              <div id="likers-container-369408" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="369408"
                     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 #118"></div>
  </section>
</div>
    <div class="postbit" id="369616" data-post-id="369616">
  <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 reporting, let me check</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="369616" 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/120">Post #119</a>
	                </div>
	            </div>
              <div id="likers-container-369616" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="369616"
                     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 #119"></div>
  </section>
</div>
    <div class="postbit" id="392301" data-post-id="392301">
  <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-392301-update-aug-2nd-2026-1" class="anchor" href="#p-392301-update-aug-2nd-2026-1" aria-label="Heading link" rel="nofollow"></a>Update Aug 2nd 2026</h1>
<p>I have been off for quite long, since I joined new start up company, so I don’t have much time to maintain this project.<br>
Recently, I spent some time to update and fix lots of issues, as well as add support for new components.</p>
<p><strong>1. Migrate to tailwindcss v4</strong></p>
<ol start="2">
<li><strong>Replace tailwindcss-animate by tw-animate-css</strong></li>
<li><strong>Add toast component which mimic behavior of Sonner in React</strong></li>
</ol>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/7/0/70e96e24868330d2974eae9eca74e6f040acca94.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/70e96e24868330d2974eae9eca74e6f040acca94" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/7/0/70e96e24868330d2974eae9eca74e6f040acca94_2_690x333.jpeg" alt="image" data-base62-sha1="g6RB7kZMQZSkwKn8UTaW7umbXUg" width="690" height="333" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/7/0/70e96e24868330d2974eae9eca74e6f040acca94_2_690x333.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/7/0/70e96e24868330d2974eae9eca74e6f040acca94_2_1035x499.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/7/0/70e96e24868330d2974eae9eca74e6f040acca94.jpeg 2x" data-dominant-color="FBFAFC"><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">1270×613 20.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>
<p><strong>Demo</strong></p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://salad-storybook.fly.dev/examples/toast">
  <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/toast" 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/toast" target="_blank" rel="noopener nofollow ugc">Salad UI - 
      Toast</a></h3>



  </article>

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

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

<p><strong>Document:</strong> <a href="https://salad-ui.hexdocs.pm/1.0.0-rc.1/SaladUI.Toast.html" class="inline-onebox" rel="noopener nofollow ugc">SaladUI.Toast — SaladUI v1.0.0-rc.1</a></p>
<p>Thank you for your patient. You are welcome to contribute or maintain this project.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="392301" 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/121">Post #120</a>
	                </div>
	            </div>
              <div id="likers-container-392301" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="392301"
                     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>