yall.js (Yet Another Lazy Loader)

Uncompressed size. gzip size. Brotli size.

yall.js is a SEO-friendly lazy loader for elements as well as CSS background images. It works in all modern browsers. It uses Intersection Observer where available. yall.js can also monitor the DOM for changes using Mutation Observer to lazy load elements that have been appended to the DOM after initial load, which may be desirable for single page applications.

yall.js 4 removes lazy loading for , , and </code> elements, as <a href="https://web.dev/browser-level-image-lazy-loading/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">native lazy loading</a> covers these use cases. However, yall.js 4 retains the ability to lazy load autoplaying <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><video></code> (ala animated GIFs), lazy loading <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><video></code> element <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">poster</code> images, as well as CSS background images.</p><p class="my-3">To use yall, grab <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">yall.min.js</code> (or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">yall.min.mjs</code> if you're the modern sort) from the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">dist</code> directory and slap it on your page. You can also install it with npm:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">shell<br />npm install yall-js<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage</h2></p><p class="my-3">This is version 4 of yall.js, and introduces a named export named </code>yall<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> rather than a single default export:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// Import y'all<br />import { yall } from "yall-js";</p><p class="my-3">// Invoke!<br />yall();<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The above syntax is sufficient if you don't want to pass in any options. <a href="#api-options" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">If you _do_ want to specify options</a>, you'll need to use a slightly more verbose syntax:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// Import y'all<br />import { yall } from "yall-js";</p><p class="my-3">// Invoke!<br />yall({<br /> observeChanges: true<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">From there, lazy loading elements depends on _what_ you want to lazy load. Let's take a look at what you can do with it.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">yall.js covers two possible lazy loading patterns for video.</p><p class="my-3">#### Lazy-loading videos intended as replacements for animated GIFs</p><p class="my-3">yall.js can lazy load </code><video><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> elements intended to <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">replace animated GIFs with autoplaying videos</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><video class="lazy" autoplay loop muted playsinline><br /> <source data-src="video.webm" type="video/webm"><br /> <source data-src="video.mp4" type="video/mp4"><br /></video><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The pattern is largely the same as it is with </code><picture><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, only the </code>lazy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class is applied to the </code><video><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element. <strong>Tip:</strong> If you're embedding videos that _don't_ emulate animated GIFs (i.e., non autoplaying video), it's better to _not_ lazy load them. Instead, use the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>preload<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute</a> to defer loading of video content. Please also note that video autoplay policies can change at any time, meaning your video may not autoplay on some platforms! Such behaviors are not bugs, but rather features designed to respect users' bandwidth and preferences. Filing issues related to video autoplay issues will likely be rejected, as yall.js can't (and won't) override browser policies.</p><p class="my-3">#### Lazy-loading </code>poster<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> placeholder images for non-autoplaying video</p><p class="my-3">Sometimes you have video you'd rather not autoplay, such as those with an audio track. Or, perhaps you want to be more considerate of your user's bandwidth (how nice of you). In these cases, the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>poster<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute</a> can be used to load a placeholder image. However, these images can also be rather large, especially if you have a number of videos on the page that use this pattern. You can lazy load </code>poster<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> images with the following markup pattern:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><video class="lazy" data-poster="placeholder.jpg" controls preload="none"><br /> <source src="video.webm" type="video/webm"><br /> <source src="video.mp4" type="video/mp4"><br /></video><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">This pattern is slightly different than the one before it. Because we're not trying to emulate animated GIFs, we've removed a number of attributes from the </code><video><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element that aren't necessary in this case:</p><p class="my-3">1. We've done away with the usual </code>data-src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute, and specified </code>preload="none"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to ensure the browser doesn't preload any portion of the video (which, depending on the browser, can't be guaranteed).<br />2. To lazy load the </code>poster<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> image itself, we specify the image to load in a </code>data-poster<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute.<br />3. The </code>controls<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute is added here to allow the user to control video playback.</p><p class="my-3"><strong>Note:</strong> For the sake of your users, don't mix the above markup patterns. If a video is going to use </code>autoplay<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to replace an animated image, lazy loading a placeholder image via </code>data-poster<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> isn't necessary. Furthermore, if you're unsure of what to do, _let browsers handle this stuff and don't use yall.js to manage loading of videos at all!_</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Last, but not least, you can use yall.js to lazy load images referenced in CSS. This might be useful if you have a very large </code>background-image<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> you'd like to defer. Proper use of this feature requires _both_ HTML and CSS. To start, let's say you have a </code><div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> that loads a very large masthead </code>background-image<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><br /><div class="masthead lazy-bg"></div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The key here is the </code>lazy-bg<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class, which is a class yall.js looks for (and can be changed in the options). When yall.js sees elements with this class, it will remove that class and replace it with a class of </code>lazy-bg-loaded<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (also changeable in the options). From here, it's up to you to author CSS that makes use of this class to swap the image in. Such CSS might look like this:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br />/<em> Pre-lazy loading styles </em>/<br />.masthead {<br /> background: #e6e6e6; /<em> A little placeholder color </em>/<br /> height: 16.66vw;<br /> margin: 0 0 1rem;<br />}</p><p class="my-3">/<em> BAM! Lazy loaded! </em>/<br />.masthead.lazy-bg-loaded {<br /> background: url("masthead.jpg");<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">This works because, unlike HTML which loads most resources regardless of their visibility, CSS loads resources only if the current layout builds a CSSOM which includes them. That means if your document's style tree changes later on to request a background image, the browser will fetch it the moment the change is applied. Leaning on this behavior is more sensible than using a mess of </code>data-<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attributes pointing to possible image candidates, which could potentially add a bunch of extra markup and introduce edge cases that are difficult to code for.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">What about users without JavaScript?</h2></p><p class="my-3">Slap on some </code><noscript><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><br /><video class="lazy" preload="none" autoplay loop muted playsinline><br /> <source data-src="video.webm" type="video/webm"><br /> <source data-src="video.mp4" type="video/mp4"><br /></video><br /><noscript><br /> <video preload="none" autoplay loop muted playsinline><br /> <source src="video.webm" type="video/webm"><br /> <source src="video.mp4" type="video/mp4"><br /> </video><br /></noscript></p><p class="my-3"><br /><video class="lazy" preload="none" autoplay loop muted playsinline data-poster="img/video-poster.jpg"><br /> <source src="video.webm" type="video/webm"><br /> <source src="video.mp4" type="video/mp4"><br /></video><br /><noscript><br /> <video preload="none" autoplay loop muted playsinline poster="img/video-poster.jpg"><br /> <source src="video.webm" type="video/webm"><br /> <source src="video.mp4" type="video/mp4"><br /> </video><br /></noscript><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Then place a </code>no-js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class on the </code><html><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><html class="no-js"><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Finally, add this one line </code><script><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> before any </code><link><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code><style><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> elements in the document </code><head><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><br /><script>document.documentElement.classList.remove("no-js")</script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Normally, this script will remove the </code>no-js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class from the </code><html><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element as the page loads, but if JavaScript is turned off, this never happens. From there, you can add some CSS that hides elements with a </code>class<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> of </code>lazy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> when the </code>no-js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> class is present on the </code><html><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br />/<em> Hide .lazy elements if JavaScript is off </em>/<br />.no-js .lazy {<br /> display: none;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To see all these examples in action, clone the repo, install packages, run </code>npm test<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and check out the demos on your local machine at <a href="http://localhost:8080" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">http://localhost:8080</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API options</h2></p><p class="my-3">When you call the main </code>yall<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> initializing function, you can pass an in an options object. Here are the current options available:</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>default:</strong> </code>"lazy"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br><br />The element class used by yall.js to find elements to lazy load. Change this is if a </code>class<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute value of </code>lazy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> conflicts with your application.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>default:</strong> </code>"lazy-bg"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br><br />The element class used by yall.js to find elements to lazy load CSS background images for. Change this if you'd prefer not to use the default.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>default:</strong> </code>"lazy-bg-loaded"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br><br />When yall.js finds elements using the class specified by </code>lazyBackgroundClass<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, it will remove that class and put this one in its place. This will be the class you use in your CSS to bring in your background image when the affected element is scrolled into the viewport.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>default:</strong> </code>200<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br><br />The threshold (in pixels) for how far elements need to be within the viewport to begin lazy loading.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br /><strong>default:</strong> </code>{}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br><br />An object of events that get sent directly to <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>addEventListener<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> for each element to be lazy loaded. Rather than building an opinionated, bespoke event management system, this system gets out of your way and lets you to specify whatever events are possible to bind with </code>addEventListener<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Here's an example below:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />yall({<br /> events: {<br /> // The object key is sent as the first argument to </code>addEventListener<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">,<br /> // which is the event. The corresponding value can be the callback if you<br /> // don't want to send any options to </code>addEventListener<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> load: function (event) {<br /> if (!event.target.classList.contains("lazy")) {<br /> event.target.classList.add("yall-loaded");<br /> }<br /> },<br /> // If we want to pass options to the third argument in </code>addEventListener<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">,<br /> // we can use a nested object syntax like so:<br /> error: {<br /> // Here, the </code>listener<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> member is the callback.<br /> listener: function (event) {<br /> if (!event.target.classList.contains("lazy") && event.target.nodeName == "VIDEO") {<br /> event.target.classList.add("yall-error");<br /> }<br /> },<br /> // The option below is sent as the third argument to </code>addEventListener<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">,<br /> // offering more control over how events are bound. If you want to<br /> // specify </code>useCapture<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in lieu of options pass a boolean here instead.<br /> options: {<br /> once: true<br /> }<br /> }<br /> }<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Events for yall.js are bound at initialization time (often </code>DOMContentLoaded<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). This means that some events _could_ fire multiple times, depending on the event. For instance, in the above </code>load<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event example, you can see that we check for the default class of </code>lazy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> on the element. This is because the </code>load<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event could fire when the initial image placeholder loaded (if one is specified) _and_ when the final image is lazy loaded.</p><p class="my-3">The advantage of this approach is that you can do pretty much anything you want in any of the events on the elements yall.js observes. The disadvantage is that it places the responsibility squarely on you to manage events. If you think yall.js has a bug in this behavior, do your due diligence to research whether your event callback code is buggy before filing issues.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>default:</strong> </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br><br />Use a </code>MutationObserver<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to monitor the DOM for changes. This is useful if you're using yall.js in a single page application and want to lazy load resources for markup injected into the page after initial page render.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>default:</strong> </code>"body"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br><br />If </code>observeChanges<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is set to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the value of this string is fed into </code>document.querySelector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to limit the scope in which the Mutation Observer looks for DOM changes. The </code><body><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element is monitored by default, but you can confine the observer to any valid CSS selector (e.g., </code>#main-wrapper<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>default:</strong> </code>{ childList: true, subtree: true }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br><br />Options to pass to the </code>MutationObserver<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instance. Read <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">this MDN guide</a> for a list of options. It's very possible that changing this value could result in yall.js failing to lazy load resources that are appended to the DOM later on.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Words of advice</h2></p><p class="my-3">Unlike previous versions of yall-js, compatibility back to IE 11 is no longer a goal. If you need compatibility with older browsers, install the previous release of yall.js like so:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">shell<br />npm i yall@3.2.0<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Also, it is not this script's job to minimize <a href="https://web.dev/cls/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">layout shifts</a> for you. <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Use appropriate </code>width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>height<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attributes</a>, styles, and lightweight placeholders for your images.</p><p class="my-3">For </code><video><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> elements, avoid lazy loading a placeholder with the </code>data-poster<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute for autoplaying videos and just use </code>poster<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. On the other hand, _do_ consider lazy loading a placeholder image with </code>data-poster<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for non-autoplaying videos. Or you can opt _not_ to use a </code>poster` image. Your website, your call.</p><p class="my-3">Also, do _not_ lazy load resources that are likely to near the top of the page—or "above the fold", as it were. Doing so is an anti-pattern in that those resources will not begin loading until yall.js has been loaded, which may take much longer than if those resources were loaded normally. Such a pattern will negatively affect your page's <a href="https://web.dev/lcp/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">LCP</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2></p><p class="my-3">Please read the <a href="https://github.com/malchata/yall.js/blob/master/CONTRIBUTING.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">contribution guidelines</a>. If you think I'm some kind of grumpy crank after reading that, please remember that this is a hobby project you can use for free.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2b:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2c:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.15.0\"}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>