1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/bold.p.24l13l5t-k6l6.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/bolditalic.p.0ynr3dgi_pqnx.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/c47649aa31f9e140-s.p.3lxpqujs87tck.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/italic.p.2wurv2__1kp41.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/regular.p.1tzvrla_jnz37.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="https://pbs.twimg.com/profile_images/1909353910130950147/EeSGdgA5_normal.jpg" as="image"/><link rel="stylesheet" href="/_next/static/chunks/0aoa-axcmnzjd.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/14gni4magx9_7.js"/>
1<script src="/_next/static/chunks/0g8ku62w0yb2s.js" async=""></script>
1<script src="/_next/static/chunks/34oyci46fsc5w.js" async=""></script>
1<script src="/_next/static/chunks/0059ut2iyib7_.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-1-a550r8u81za.js" async=""></script>
1<script src="/_next/static/chunks/3yal63karjxdl.js" async=""></script>
1<script src="/_next/static/chunks/1m5ykreap-f2c.js" async=""></script>
1<script src="/_next/static/chunks/0p03d770byi7o.js" async=""></script>
1<script src="/_next/static/chunks/3xtsf27fdenpv.js" async=""></script>
1<script src="/_next/static/chunks/1a-cexoqm_umt.js" async=""></script>
1<script src="/_next/static/chunks/22wjgwg1xfiaq.js" async=""></script>
1<script src="/_next/static/chunks/2p1-wmiewoku9.js" async=""></script>
1<script src="/_next/static/chunks/31plt5z8s7d6v.js" async=""></script>
1<script src="/_next/static/chunks/04g4-k9o9pci1.js" async=""></script>
1<script src="/_next/static/chunks/2t2kvq8r1t299.js" async=""></script>
1<link rel="preload" href="/_next/static/media/404.0bgs5qt365db-.webp" as="image"/><meta name="next-size-adjust" content=""/><title>joulev.dev » glui</title><meta name="description" content="A glassmorphic component collection"/><meta name="robots" content="index, follow"/><meta property="og:title" content="joulev.dev » glui"/><meta property="og:description" content="A glassmorphic component collection"/><meta property="og:url" content="https://joulev.dev/glui"/><meta property="og:image" content="https://joulev.dev/glui/opengraph-image-vglc78.png?opengraph-image.1l3r0v7a870hh.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="joulev.dev » glui: A glassmorphic component collection 2"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="joulev.dev » glui"/><meta name="twitter:description" content="A glassmorphic component collection"/><meta name="twitter:image" content="https://joulev.dev/glui/opengraph-image-vglc78.png?opengraph-image.1l3r0v7a870hh.png"/><meta name="twitter:image:alt" content="joulev.dev » glui: A glassmorphic component collection 3"/><meta name="twitter:image:type" content="image/png"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><link rel="icon" href="/favicon.svg" type="image/svg+xml"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any"/>
3<script src="/_next/static/chunks/0cz1d0mv5g_q7.js" noModule=""></script>
3</head><body class="hanken_grotesk_ad61473d-module__EPO_hG__variable mono_6151a79f-module__wDZ00a__variable bg-bg-site-bg font-sans text-text-primary"><div hidden=""><!--$--><!--/$--></div><div class="fixed inset-0 -z-50 pattern-cross pattern-text-tertiary pattern-bg-bg-site-bg pattern-size-6"></div><div class="pb-12 pt-[152px]"><main class="container max-w-screen-md"><div class="overflow-clip card rounded-full bg-bg-idle backdrop-blur transition flex flex-col p-0"><div class="bg-bg-darker pt-36 relative pb-6 sm:pb-12 px-6 sm:px-12"><div class="absolute inset-0 -z-10" style="background-image:url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='2' cy='2' r='2' fill='%23afafaf70' /%3E%3C/svg%3E");background-position:13px 16px;mask-image:linear-gradient(to top right, #0000 0%, #0003 50%, #000 100%);-webkit-mask-image:linear-gradient(to top right, #0000 0%, #0003 50%, #000 100%)"></div><div class="flex flex-col gap-6"><div class="flex flex-col gap-3"><h1 class="flex flex-row items-baseline gap-3"><span class="text-3xl font-medium">glui</span><span class="cursor-default select-none self-center rounded-full bg-bg-idle px-3 py-1 text-sm text-text-secondary">work in progress</span></h1><div class="text-lg text-text-secondary"><p class="text-lg text-text-secondary">A component collection based on<!-- --> <a class="link" target="_blank" rel="noreferrer noopener" href="https://www.figma.com/community/file/1253443272911187215/apple-design-resources-visionos">visionOS UI design system</a> <!-- -->and built using <a class="link" target="_blank" rel="noreferrer noopener" href="https://radix-ui.com/">Radix UI</a>,<!-- --> <a class="link" target="_blank" rel="noreferrer noopener" href="https://tailwindcss.com/">Tailwind CSS</a> and<!-- --> <a class="link" target="_blank" rel="noreferrer noopener" href="https://ui.shadcn.com/">shadcn/ui</a>.</p></div></div><div class="flex flex-col items-stretch gap-x-6 gap-y-3 sm:flex-row"><a class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-text-primary text-black shadow disabled:shadow-none px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6 w-full sm:w-auto" style="--hover-bg-left:0px;--hover-bg-top:0px" target="_blank" rel="noreferrer noopener" href="https://github.com/joulev/website/tree/main/src/components/ui"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>GitHub icon</title><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85m0 0v4m0-4c-4.51 2-5-2-7-2"></path></svg> Component sources</a><a class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6 w-full sm:w-auto" style="--hover-bg-left:0px;--hover-bg-top:0px" target="_blank" rel="noreferrer noopener" href="https://github.com/joulev/glui-starter">Starter template</a></div></div></div><div class="py-12 px-6 sm:px-12"><article class="prose min-w-full"><h2 id="prerequisites" class="scroll-mt-36"><a href="#prerequisites" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Prerequisites</a></h2> 4<p>glui is a component collection based on <a class="link" target="_blank" rel="noreferrer noopener" href="https://ui.shadcn.com">shadcn/ui</a>. As such, all prerequisites of shadcn/ui apply to glui as well. In other words, you have to use <a class="link" target="_blank" rel="noreferrer noopener" href="https://nextjs.org">Next.js</a>, <a class="link" target="_blank" rel="noreferrer noopener" href="https://react.dev">React</a> and <a class="link" target="_blank" rel="noreferrer noopener" href="https://tailwindcss.com">Tailwind CSS</a>. Support for other frameworks and libraries is not planned.</p> 5<p>You are advised to be familiar with Tailwind CSS before using this collection.</p> 6<p>It is also recommended that you use TypeScript. Only basic understanding of TypeScript is required. All the components are written in TypeScript, and I don't provide the JavaScript versions for them, so if for some reasons you don't know basic TypeScript and are not willing to learn it, at least you should learn how to remove typings to convert the provided TypeScript files into JavaScript.</p> 7<h2 id="installation" class="scroll-mt-36"><a href="#installation" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Installation</a></h2> 8<h3 id="this-collection-is-not-a-published-package" class="scroll-mt-36"><a href="#this-collection-is-not-a-published-package" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>This collection is not a published package</a></h3> 9<p>
9This collection is distributed via copy-paste, not via a central package registry such as NPM. In other words, you do <strong>not</strong> do something like <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">npm install @joulev/glui</code> to add the collection to your project. You just need to copy-paste the necessary components to use it as your own components. This is the same distribution method as shadcn/ui.</p> 10<p>Why copy-paste? You as the user will own the components and can make changes to them as you like. You can also easily remove the components you don't need. This means you have complete control over all glui components. For more information, check <a class="link" target="_blank" rel="noreferrer noopener" href="https://ui.shadcn.com/docs#faq">shadcn/ui's reasons behind this distribution method</a>.</p> 11<h3 id="installation-from-scratch" class="scroll-mt-36"><a href="#installation-from-scratch" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Installation from scratch</a></h3> 12<p>You can simply use <a class="link" target="_blank" rel="noreferrer noopener" href="https://github.com/joulev/glui-starter">this starter repository</a> to get started. It has all the necessary configurations and basic setups, with two components preinstalled (link and card). Other components can then be installed normally by copy-
12pasting.</p> 13<h3 id="installation-to-an-existing-project" class="scroll-mt-36"><a href="#installation-to-an-existing-project" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Installation to an existing project</a></h3> 14<p><strong>Warning:</strong> It is not easy and you need some level of experience with Tailwind CSS custom configurations to continue.</p> 15<ol> 16<li> 17<p>Ensure that project meets the prerequisites above.</p> 18<p>I will assume you use the <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">src</code> directory in your Next.js app. If you don't use <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">src</code>, simply remove it from the paths in the following steps.</p> 19</li> 20<li> 21<p>Install the necessary dependencies: <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8deefbeccdbca3bda3bda0efe8f9eca3bc">[email protected]</a> tailwind-merge tailwindcss-animate</code> â you can use yarn, pnpm or bun if you prefer.</p> 22</li> 23<li> 24<p>If you already have the following files in your project, modify them to also integrate the corresponding files from <a class="link" target="_blank" rel="noreferrer noopener" href="https://github.com/joulev/glui-starter">the starter repository</a>. If you do not have those files in your project yet, copy the files from the starter repository to your project.</p> 25<ul> 26<li> 27<p><code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">tailwind.config.ts</code> or an equivalent Tailwind CSS configuration file</p> 28</li> 29<li> 30<p><code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">postcss.config.js</code>Â â glui requires you to configure PostCSS to also <a class="link" target="_blank" rel="noreferrer noopener" href="https://tailwindcss.com/docs/using-with-preprocessors#nesting">allow CSS nesting</a></p> 31</li> 32<li> 33<p>Global CSS file, which is most likely placed in <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">src/app/globals.css</code></p> 34</li> 35</ul> 36</li> 37<li> 38<p>Copy the following files from <a class="link" target="_blank" rel="noreferrer noopener" href="https://github.com/joulev/glui-starter">the starter repository</a>:</p> 39<ul> 40<li> 41<p><code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">src/types/fix/react.ts</code>: This file is a patch to the React typings to make TypeScript accept CSS variables in the <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">style</code> prop of HTML elements. If you don't use TypeScript, you can ignore this file.</p> 42</li> 43<li> 44<p><code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">src/lib/cn.ts</code></p> 45</li> 46<li> 47<p><code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">src/components/ui/hooks/use-hover-background.ts</code></p> 48</li> 49</ul> 50</li> 51<li> 52<p>Add the <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">text-text-primary</code> class to your <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">body</code> element, or by other means ensure that <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">text-text-primary</code> is applied to the text colour of glui components.</p> 53</li> 54<li> 55<p>Fix import statements in the copied files to match your project's directory structure.</p> 56</li> 57<li> 58<p>Now you can start copy-pasting the components and use them in your project.</p> 59</li> 60</ol> 61<h3 id="copy-pasting-components" class="scroll-mt-36"><a href="#copy-pasting-components" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Copy-pasting components</a></h3> 62<p>The component sources can be found in <a class="link" target="_blank" rel="noreferrer noopener" href="https://github.com/joulev/website/tree/main/src/components/ui">the repository for this website</a>. Select the one you want, then copy the file to under <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">src/components/ui</code> in your project.</p> 63<p>For example, to install the <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">Link</code> component, simply create <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">src/components/ui/link.tsx</code> with the same content as <a class="link" target="_blank" rel="noreferrer noopener" href="https://github.com/joulev/website/blob/main/src/components/ui/link.tsx">the source file</a>.</p> 64<p>You might need to update the import statements in the copied files to match your project's directory structure.</p> 65<p>Note that some components have dependencies. For example, <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">Button</code> depends on <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">Link</code>, so if you want to install <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">Button</code> you also need to ensure <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">Link</code> has been installed. Another example would be the <code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">Tweet</code> component, which requires <a class="link" target="_blank" rel="noreferrer noopener" href="https://react-tweet.vercel.app"><code class="mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]">react-tweet</code></a>, so you need to install this package for the component to work.</p> 66<h2 id="components" class="scroll-mt-36"><a href="#components" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Components</a></h2> 67<p>You can check <a class="link" target="_blank" rel="noreferrer noopener" href="https://github.com/joulev/website/blob/main/src/app/(public)/glui/components.tsx">the example usage of all components</a> to see how to use them. Yeah I should put the source code of the examples here, but I'm too lazy to do that. Maybe later.</p> 68<p>Anyway, most components are based on shadcn/ui, hence the usage should be identical to the shadcn/ui counterparts.</p> 69<section><h3 id="buttons" class="scroll-mt-36"><a href="#buttons" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Buttons</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none"><div class="flex flex-col gap-6"><div class="flex flex-row flex-wrap gap-3"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-text-primary text-black shadow disabled:shadow-none w-fit px-3 py-1 text-sm [--button-gap:0.25rem] [&_svg]:size-4" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Primary</button><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-3 py-1 text-sm [--button-gap:0.25rem] [&_svg]:size-4" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Secondary</button><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-transparent text-text-primary hover:bg-bg-hover active:bg-bg-active w-fit px-3 py-1 text-sm [--button-gap:0.25rem] [&_svg]:size-4" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Ghost</button></div><div class="flex flex-row flex-wrap gap-3"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-text-primary text-black shadow disabled:shadow-none w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Primary</button><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Secondary</button><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-transparent text-text-primary hover:bg-bg-hover active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Ghost</button></div><div class="flex flex-row flex-wrap gap-3"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-text-primary text-black shadow disabled:shadow-none w-fit px-5 py-2.5 text-lg [--button-gap:0.75rem] [&_svg]:size-7" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Primary</button><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-5 py-2.5 text-lg [--button-gap:0.75rem] [&_svg]:size-7" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Secondary</button><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-transparent text-text-primary hover:bg-bg-hover active:bg-bg-active w-fit px-5 py-2.5 text-lg [--button-gap:0.75rem] [&_svg]:size-7" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Ghost</button></div></div><div class="flex flex-row flex-wrap gap-3"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" disabled=""
69style="--hover-bg-left:0px;--hover-bg-top:0px">Disabled</button><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active h-[42px] w-[42px] p-2 [--button-gap:0.5rem] [&_svg]:size-6" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>User icon</title><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg></button><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>User icon</title><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg> User</button><a class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" style="--hover-bg-left:0px;--hover-bg-top:0px" target="_blank" rel="noreferrer noopener" href="https://example.com">Link</a></div></div></section> 70<section><h3 id="cards" class="scroll-mt-36"><a href="#cards" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Cards</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non doloribus iure porro, sunt dolore eius, delectus reprehenderit maiores iste temporibus, praesentium repudiandae quod. Sapiente nesciunt, exercitationem, libero ipsa nam molestias nostrum quidem labore earum deleniti, impedit nemo consequatur unde ut facilis?</div><div class="flex flex-row justify-end gap-3"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Cancel</button><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-text-primary text-black shadow disabled:shadow-none w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Submit</button></div></div></section> 71<section><h3 id="dialog" class="scroll-mt-36"><a href="#dialog" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Dialog</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition gap-6 not-prose backdrop-blur-none flex flex-row justify-center py-12"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" style="--hover-bg-left:0px;--hover-bg-top:0px">About Lipsum</button></div></section> 72<section><h3 id="dropdown" class="scroll-mt-36"><a href="#dropdown" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Dropdown</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition flex-col gap-6 not-prose backdrop-blur-none grid grid-cols-1 sm:grid-cols-3"><div class="grid place-items-center py-9"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" id="radix-_R_phinpfcnlb_" aria-haspopup="menu" aria-expanded="false" data-state="closed" style="--hover-bg-left:0px;--hover-bg-top:0px">Normal<svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>ChevronDown icon</title><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="grid place-items-center py-9"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" id="radix-_R_19hinpfcnlb_" aria-haspopup="menu" aria-expanded="false" data-state="closed" style="--hover-bg-left:0px;--hover-bg-top:0px">Checkbox<svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>ChevronDown icon</title><path d="m6 9 6 6 6-6"></path></svg></button></div><div class="grid place-items-center py-9"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" id="radix-_R_1phinpfcnlb_" aria-haspopup="menu" aria-expanded="false" data-state="closed" style="--hover-bg-left:0px;--hover-bg-top:0px">Radio<svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>ChevronDown icon</title><path d="m6 9 6 6 6-6"></path></svg></button></div></div></section> 73<section><h3 id="input" class="scroll-mt-36"><a href="#input" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Input</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition flex-col not-prose backdrop-blur-none grid grid-cols-1 gap-6 sm:grid-cols-2"><div class="relative overflow-hidden rounded-full bg-bg-darker hover-bg recessed" style="--hover-bg-left:0px;--hover-bg-top:0px"><input type="text" class="peer w-full bg-transparent py-[9px] pl-4 pr-[42px] caret-blue placeholder:font-medium placeholder:text-text-secondary [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [appearance:textfield]" placeholder="Text" value="This component must be controlled by a client-side React state to work properly."/><div class="absolute right-[7px] top-1/2 -translate-y-1/2 transition-opacity peer-disabled:pointer-events-none peer-disabled:opacity-0 opacity-100"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active h-[30px] w-[30px] p-1 [--button-gap:0.25rem] [&_svg]:size-4" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>
73X icon</title><path d="M18 6 6 18M6 6l12 12"></path></svg></button></div></div><div class="relative overflow-hidden rounded-full bg-bg-darker opacity-50" style="--hover-bg-left:0px;--hover-bg-top:0px"><input type="text" class="peer w-full bg-transparent py-[9px] pl-4 pr-[42px] caret-blue placeholder:font-medium placeholder:text-text-secondary [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [appearance:textfield]" disabled="" placeholder="Disabled"/><div class="absolute right-[7px] top-1/2 -translate-y-1/2 transition-opacity peer-disabled:pointer-events-none peer-disabled:opacity-0 opacity-100"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active h-[30px] w-[30px] p-1 [--button-gap:0.25rem] [&_svg]:size-4" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>X icon</title><path d="M18 6 6 18M6 6l12 12"></path></svg></button></div></div></div></section> 74<section><h3 id="links" class="scroll-mt-36"><a href="#links" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Links</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none"><p>The <strong>Big Bang</strong> event is a<!-- --> <a class="link" target="_blank" rel="noreferrer noopener" href="https://en.wikipedia.org/wiki/Physical_theory">physical theory</a> that describes how the<!-- --> <a class="link" target="_blank" rel="noreferrer noopener" href="https://en.wikipedia.org/wiki/Expansion_of_the_universe">universe expanded</a> <!-- -->from an initial state of high<!-- --> <a class="link" target="_blank" rel="noreferrer noopener" href="https://en.wikipedia.org/wiki/Energy_density">density</a> and<!-- --> <a class="link" target="_blank" rel="noreferrer noopener" href="https://en.wikipedia.org/wiki/Temperature">temperature</a>.</p><p><a class="link" target="_blank" rel="noreferrer noopener" href="https://en.wikipedia.org/wiki/Big_Bang">Click this link to read the full article on the Big Bang, while I make this link ridiculously long to show how the component works with line breaks.</a></p></div></section> 75<section><h3 id="list" class="scroll-mt-36"><a href="#list" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>List</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition flex-col not-prose backdrop-blur-none grid grid-cols-1 gap-9 sm:grid-cols-2"><section class="flex flex-col gap-2"><div class="px-6 text-lg font-bold">Title</div><ul class="flex flex-col overflow-hidden rounded [&_[data-li-inner]:hover:active]:bg-bg-active **:data-li-inner:px-6 **:data-li-inner:py-4 **:data-li-inner:transition-colors **:data-li:transition-colors [&_[data-li-inner]:hover]:bg-bg-hover **:data-li-inner:bg-bg-darker [&_[data-li]:first-of-type]:border-none [&_[data-li]:hover]:border-transparent [&_[data-li]:hover+[data-li]]:border-transparent **:data-li:border-t **:data-li:border-separator"><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->1</div></li><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->2</div></li><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->3</div></li><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->4</div></li><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->5</div></li></ul></section><section class="flex flex-col gap-2"><div class="px-6 text-lg font-bold">Title</div><ul class="flex flex-col overflow-hidden rounded [&_[data-li-inner]:hover:active]:bg-bg-active **:data-li-inner:px-6 **:data-li-inner:py-4 **:data-li-inner:transition-colors **:data-li:transition-colors [&_[data-li-inner]:hover]:bg-bg-idle **:data-li-inner:rounded [&_[data-li]:first-of-type]:border-none [&_[data-li]:hover]:border-transparent [&_[data-li]:hover+[data-li]]:border-transparent **:data-li:border-t **:data-li:border-separator"><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->1</div></li><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->2</div></li><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->3</div></li><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->4</div></li><li data-li="true"><div class="hover-bg flex w-full flex-row" style="--hover-bg-left:0px;--hover-bg-top:0px" data-li-inner="true">Item <!-- -->5</div></li></ul></section></div></section> 76<section><h3 id="navigation-menu" class="scroll-mt-36"><a href="#navigation-menu" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Navigation Menu</a></h3><div class="flex flex-col items-center not-prose"><div><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative z-10 flex max-w-max flex-1 items-center justify-center **:data-navigation-menu-viewport:backdrop-blur-none"><div style="position:relative"><ul data-orientation="horizontal" class="card-pill group flex flex-1 list-none items-center justify-center gap-2 rounded-full bg-bg-idle p-2 backdrop-blur-none" dir="ltr"><li><button id="radix-_R_ppinpfcnlb_-trigger-radix-_R_mppinpfcnlb_" data-state="closed" aria-expanded="false" class="hover-bg group/menu-trigger relative inline-flex w-max items-center justify-center rounded-full bg-transparent px-4 py-2 text-text-secondary transition-colors hover:bg-bg-idle hover:text-text-primary focus:outline-none active:bg-bg-active active:text-text-primary disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-bg-idle data-active:text-text-primary data-[state=open]:text-text-primary" style="--hover-bg-left:0px;--hover-bg-top:0px" data-radix-collection-item="">Getting started<!-- --> <svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current relative ml-2 size-4 transition-transform group-data-[state=open]/menu
76-trigger:rotate-180"><title>ChevronDown icon</title><path d="m6 9 6 6 6-6"></path></svg></button></li><li><button id="radix-_R_ppinpfcnlb_-trigger-radix-_R_16ppinpfcnlb_" data-state="closed" aria-expanded="false" class="hover-bg group/menu-trigger relative inline-flex w-max items-center justify-center rounded-full bg-transparent px-4 py-2 text-text-secondary transition-colors hover:bg-bg-idle hover:text-text-primary focus:outline-none active:bg-bg-active active:text-text-primary disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-bg-idle data-active:text-text-primary data-[state=open]:text-text-primary" style="--hover-bg-left:0px;--hover-bg-top:0px" data-radix-collection-item="">Components<!-- --> <svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current relative ml-2 size-4 transition-transform group-data-[state=open]/menu-trigger:rotate-180"><title>ChevronDown icon</title><path d="m6 9 6 6 6-6"></path></svg></button></li><li class="max-sm:hidden"><a class="hover-bg relative flex flex-row items-center whitespace-nowrap rounded-full px-4 py-2 text-text-secondary transition-colors hover:bg-bg-idle hover:text-text-primary focus:outline-none active:bg-bg-active active:text-text-primary disabled:pointer-events-none disabled:opacity-50 before:rounded-full" style="--hover-bg-left:0px;--hover-bg-top:0px" data-radix-collection-item="">Documentation</a></li></ul></div><div class="absolute top-full flex justify-center md:left-1/2 md:-translate-x-1/2"></div></nav></div><div class="h-[582px] md:h-[320px]"></div></div></section> 77<section><h3 id="progress" class="scroll-mt-36"><a href="#progress" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Progress</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none"><div class="mx-auto flex w-64 flex-col gap-6"><div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative h-1 w-full overflow-hidden rounded-full bg-bg-idle"><div data-state="indeterminate" data-max="100" class="h-full w-full flex-1 rounded-full bg-text-secondary transition-all" style="transform:translateX(calc(-100% + 4px))"></div></div><div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative h-1 w-full overflow-hidden rounded-full bg-bg-idle"><div data-state="indeterminate" data-max="100" class="h-full w-full flex-1 rounded-full bg-text-secondary transition-all" style="transform:translateX(-80%)"></div></div><div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative h-1 w-full overflow-hidden rounded-full bg-bg-idle"><div data-state="indeterminate" data-max="100" class="h-full w-full flex-1 rounded-full bg-text-secondary transition-all" style="transform:translateX(-60%)"></div></div><div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative h-1 w-full overflow-hidden rounded-full bg-bg-idle"><div data-state="indeterminate" data-max="100" class="h-full w-full flex-1 rounded-full bg-text-secondary transition-all" style="transform:translateX(-40%)"></div></div><div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative h-1 w-full overflow-hidden rounded-full bg-bg-idle"><div data-state="indeterminate" data-max="100" class="h-full w-full flex-1 rounded-full bg-text-secondary transition-all" style="transform:translateX(-20%)"></div></div><div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative h-1 w-full overflow-hidden rounded-full bg-bg-idle"><div data-state="indeterminate" data-max="100" class="h-full w-full flex-1 rounded-full bg-text-secondary transition-all" style="transform:translateX(-0%)"></div></div></div></div></section> 78<section><h3 id="select" class="scroll-mt-36"><a href="#select" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Select</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition gap-6 not-prose backdrop-blur-none flex flex-row justify-center py-12"><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="hover-bg recessed relative flex min-h-[42px] items-center justify-between rounded-full px-4 py-[9px] placeholder:font-medium placeholder:text-text-secondary disabled:static disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none w-[240px]" style="--hover-bg-left:0px;--hover-bg-top:0px"><span class="truncate"><span style="pointer-events:none">Select a fruit</span></span><svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current size-4 shrink-0 text-text-tertiary"><title>ChevronDown icon</title><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"><option value="" selected=""></option></select></div></section> 79<section><h3 id="sidebar" class="scroll-mt-36"><a href="#sidebar" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Sidebar</a></h3><div class="overflow-clip card rounded-full bg-bg-idle transition flex flex-col gap-6 not-prose backdrop-blur-none p-0"><div class="flex flex-col bg-bg-darker w-64"><div class="flex flex-row items-center justify-between gap-3 p-6"><h1 class="grow truncate text-xl font-semibold">My notes</h1><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-4 py-2 text-base [--button-gap:0.5rem] [&_svg]:size-6" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px">Edit</button></div><div class="flex flex-col p-3"><button type="button" class="flex flex-row items-center justify-between gap-3 py-2 pl-3 pr-1 text-lg font-semibold"><span class="h-[30px] grow truncate text-left">Study</span></button><div class="grid transition-all ease-in-out" style="grid-template-rows:1fr;opacity:1"><div class="overflow-hidden"><div class="flex flex-col gap-1"><div class="flex flex-row items-center gap-3 px-3 py-2 [&_svg]:size-6 [&_svg]:shrink-0 [&_svg]:text-text-secondary hover-bg relative rounded transition hover:bg-bg-idle active:bg-bg-active" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>Sigma icon</title><path d="M18 7V4H6l6 8-6 8h12v-3"></path></svg><div class="grow truncate">Mathematics</div><div class="cursor-default select-none text-xs text-text-secondary">3</div></div><div class="flex flex-row items-center gap-3 px-3 py-2 [&_svg]:size-6 [&_svg]:shrink-0 [&_svg]:text-text-secondary hover-bg relative rounded transition hover:bg-bg-idle active:bg-bg-active" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round]"><title>Atom icon</title><mask id="a"><rect width="24" height="24" fill="black"></rect><path stroke="white" d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path><path stroke="white" d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z"></path><path stroke="white" d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z"></path></mask><rect width="24" height="24" fill="currentColor" mask="url(#a)"></rect></svg><div class="grow truncate">Physics</div><div class="cursor-default select-none text-xs text-text-secondary">2</div></div><div class="flex flex-row items-center gap-3 px-3 py-2 [&_svg]:size-6 [&_svg]:shrink-0 [&_svg]:text-text-secondary hover-bg relative rounded transition hover:bg-bg-idle active:bg-bg-active bg-bg-idle" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>FlaskConical icon</title><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2M8.5 2h7M7 16h10"></path></svg><div class="grow truncate">Chemistry</div><div class="cursor-default select-none text-xs text-text-secondary">1 new</div></div></div></div></div></div><div class="flex flex-col p-3"><button type="button" class="flex flex-row items-center justify-between gap-3 py-2 pl-3 pr-1 text-lg font-semibold"><span class="h-[30px] grow truncate text-left">Gaming notes</span><span class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-transparent text-text-primary hover:bg-bg-hover active:bg-bg-active h-[30px] w-[30px] p-1 [--button-gap:0.25rem] [&_svg]:size-4" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current -rotate-90 transition-transform"><title>ChevronDown icon</title><path d="m6 9 6 6 6-6"></path></svg></span></button><div class="grid transition-all ease-in-out" style="grid-template-rows:0fr;opacity:0"><div class="overflow-hidden"><div class="flex flex-col gap-1"><div class="flex flex-row items-center gap-3 px-3 py-2 [&_svg]:size-6 [&_svg]:shrink-0 [&_svg]:text-text-secondary hover-bg relative rounded transition hover:bg-bg-idle active:bg-bg-active" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>Gamepad2 icon</title><path d="M6 11h4M8 9v4m7-1h.01M18 10h.01m-.69-5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5Z"></path></svg><div class="grow truncate">Game release dates</div></div><div class="flex flex-row items-center gap-3 px-3 py-2 [&_svg]:size-6 [&_svg]:shrink-0 [&_svg]:text-text-secondary hover-bg relative rounded transition hover:bg-bg-idle active:bg-bg-active" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>Swords icon</title><path d="M14.5 17.5 3 6V3h3l11.5 11.5M13 19l6-6m-3 3 4 4m-1 1 2-2M14.5 6.5 18 3h3v3l-3.5 3.5M5 14l4 4m-2-1-3 3m-1-1 2 2"></path></svg><div class="grow truncate">Honkai: Star Rail build guide</div><div class="cursor-default select-none text-xs text-text-secondary">5</div></div></div></div></div></div><div class="flex flex-col p-3"><button type="button" class="flex flex-row items-center justify-between gap-3 py-2 pl-3 pr-1 text-lg font-semibold"><span class="h-[30px] grow truncate text-left">Miscellaneous</span><span class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-transparent text-text-primary hover:bg-bg-hover active:bg-bg-active h-[30px] w-[30px] p-1 [--button-gap:0.25rem] [&_svg]:size-4" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current transition-transform"><title>ChevronDown icon</title><path d="m6 9 6 6 6-6"></path></svg></span></button><div class="grid transition-all ease-in-out" style="grid-template-rows:1fr;opacity:1"><div class="overflow-hidden"><div class="flex flex-col gap-1"><div class="flex flex-row items-center gap-3 px-3 py-2 [&_svg]:size-6 [&_svg]:shrink-0 [&_svg]:text-text-secondary hover-bg relative rounded transition hover:bg-bg-idle active:bg-bg-active" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>List icon</title><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"></path></svg><div class="grow truncate">Shopping lists</div></div><div class="flex flex-row items-center gap-3 px-3 py-2 [&_svg]:size-6 [&_svg]:shrink-0 [&_svg]:text-text-secondary hover-bg relative rounded transition hover:bg-bg-idle active:bg-bg-active" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>Coffee icon</title><path d="M17 8h1a4 4 0 1 1 0 8h-1m0-8H3v9a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V8ZM6 2v2m4-2v2m4-2v2"></path></svg><div class="grow truncate">Good coffee shops</div></div></div></div></div></div></div></div></section> 80<section><h3 id="slider" class="scroll-mt-36"><a href="#slider" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Slider</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none"><div class="mx-auto my-12 w-64"><span dir="ltr" data-orientation="horizontal" aria-disabled="false" class="relative flex w-full touch-none select-none items-center" style="--radix-slider-thumb-transform:translateX(-50%)"><span data-orientation="horizontal" class="recessed relative flex h-6 w-full grow flex-row overflow-hidden rounded-full bg-bg-darker"><div class="w-6"></div><div class="relative grow"><span data-orientation="horizontal" class="absolute -left-6! h-full rounded-full bg-text-secondary shadow-[5px_0px_4px_rgba(0,0,0,0.18)]" style="left:0%;right:67%"></span></div></span><span style="transform:var(--radix-slider-thumb-transform);position:absolute;
80left:calc(0% + 0px)"><span role="slider" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" data-orientation="horizontal" tabindex="0" class="group relative block size-6 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" style="display:none" data-radix-collection-item=""><div class="absolute inset-1 rounded-full bg-white transition-all group-focus-visible:inset-1.5 group-focus-visible:shadow-[0px_0px_12px_6px_rgba(255,255,255,0.2)]"></div></span></span><input style="display:none"/></span></div></div></section> 81<section><h3 id="textarea" class="scroll-mt-36"><a href="#textarea" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>TextArea</a></h3><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none"><div class="relative overflow-hidden rounded bg-bg-darker hover-bg recessed" style="--hover-bg-left:0px;--hover-bg-top:0px"><textarea class="block peer w-full bg-transparent py-[9px] pl-4 pr-[42px] caret-blue placeholder:font-medium placeholder:text-text-secondary" placeholder="Text">This component must be controlled by a client-side React state to work properly.</textarea><div class="absolute right-[7px] top-[7px] transition-opacity peer-disabled:pointer-events-none peer-disabled:opacity-0 opacity-100"><button class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active h-[30px] w-[30px] p-1 [--button-gap:0.25rem] [&_svg]:size-4" type="button" style="--hover-bg-left:0px;--hover-bg-top:0px"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>X icon</title><path d="M18 6 6 18M6 6l12 12"></path></svg></button></div></div></div></section> 82<section><h3 id="tweet" class="scroll-mt-36"><a href="#tweet" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Tweet</a></h3><div class="not-prose"><div><div class="overflow-clip card rounded-full bg-bg-idle p-6 transition not-prose mx-auto flex max-w-lg flex-col gap-6 backdrop-blur-none"><div class="flex flex-row gap-3"><a class="shrink-0" target="_blank" rel="noreferrer noopener" href="https://x.com/theo"><img src="https://pbs.twimg.com/profile_images/1909353910130950147/EeSGdgA5_normal.jpg" alt="Theo - t3.gg" width="48" height="48" class="rounded-full"/></a><div class="flex min-w-0 grow flex-col items-start"><a class="max-w-full truncate font-bold text-text-primary" target="_blank" rel="noreferrer noopener" href="https://x.com/theo">Theo - t3.gg</a><div class="flex max-w-full flex-row items-baseline gap-1.5 text-sm text-text-secondary"><a class="truncate underline-offset-4 hover:underline" target="_blank" rel="noreferrer noopener" href="https://x.com/theo">@<!-- -->theo</a><span class="cursor-default select-none max-sm:hidden">â¢</span><a class="whitespace-nowrap underline-offset-4 hover:underline max-sm:hidden" target="_blank" rel="noreferrer noopener" href="https://x.com/theo/status/1736177027433316701">17 Dec 23</a></div></div><div class="ml-3"><a class="text-text-secondary transition hover:text-text-primary" title="It's called Twitter!" target="_blank" rel="noreferrer noopener" href="https://x.com/theo/status/1736177027433316701"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>Twitter icon</title><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2Z"></path></svg></a></div></div><div class="text-sm text-text-secondary"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current inline-block size-4"><title>Reply icon</title><path d="m9 17-5-5m0 0 5-5m-5 5h12a4 4 0 0 1 4 4v2"></path></svg> Replying to<!-- --> <a class="text-text-primary underline-offset-4 hover:underline" target="_blank" rel="noreferrer noopener" href="https://x.com/theo/status/1736176754111451201">@<!-- -->theo</a></div><div class="prose"><span class="whitespace-pre-line">I will continue to be mad about the names. 83 84"use server" should have been "use action" (after reading old Next PRs, I learned it used to be called this) 85 86"use client" should have been "use interactive" (since 90%+ of the time you want client-side JS it's for some amount of</span></div><div class="flex flex-row flex-wrap gap-3"><a class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active h-[30px] w-[30px] p-1 [--button-gap:0.25rem] [&_svg]:size-4" style="--hover-bg-left:0px;--hover-bg-top:0px" target="_blank" rel="noreferrer noopener" href="https://x.com/intent/like?tweet_id=1736177027433316701"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>Heart icon</title><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7 7-7Z"></path></svg></a><a class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active h-[30px] w-[30px] p-1 [--button-gap:0.25rem] [&_svg]:size-4" style="--hover-bg-left:0px;--hover-bg-top:0px" target="_blank" rel="noreferrer noopener" href="https://x.com/intent/tweet?in_reply_to=1736177027433316701"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>MessageCircle icon</title><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22l5.9-2Z"></path></svg></a><a class="hover-bg inline-flex shrink-0 flex-row items-center justify-center gap-(--button-gap) rounded-full outline-offset-4 transition disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-text-tertiary bg-bg-idle text-text-primary active:bg-bg-active w-fit px-3 py-1 text-sm [--button-gap:0.25rem] [&_svg]:size-4" style="--hover-bg-left:0px;--hover-bg-top:0px" target="_blank" rel="noreferrer noopener" href="https://x.com/theo/status/1736177027433316701"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current"><title>ExternalLink icon</title><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6m0 0v6m0-6L10 14"></path></svg> Go to tweet</a></div></div></div></div></section> 87<h2 id="future-components" class="scroll-mt-36"><a href="#future-components" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>Future components</a></h2> 88<p>There are no planned new components at the moment. I will add new ones if I need them in this joulev.dev website. In the meantime, if you want to suggest a new component, feel free to contact me, or even better, create a pull request with the new component. All contributions are welcome.</p> 89<h2 id="license" class="scroll-mt-36"><a href="#license" class="not-prose group relative"><span aria-hidden="true" class="absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition"><span class="text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']"></span></span>License</a></h2> 90<p>MIT</p></article></div></div></main><!--$--><!--/$--></div><div class="fixed top-12 inset-x-0 z-10 right-scroll-bar-position"><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative z-10 flex max-w-max flex-1 items-center justify-center mx-auto"><div style="position:relative"><ul data-orientation="horizontal" class="card-pill group flex flex-1 list-none items-center justify-center gap-2 rounded-full bg-bg-idle p-2 backdrop-blur" dir="ltr"><li class="grid size-10 place-items-center rounded-full"><a class="group/logo-link" href="/"><svg width="18" height="23.210526315789473" viewBox="0 0 38 49"><title>joulev.dev logo</title>
90<path d="M2.17167 33.0266C1.21948 33.5975 0.00854497 32.9115 0.00854497 31.8014V17.2957C0.00854497 16.187 1.21653 15.5009 2.16877 16.0687L14.2992 23.3021C15.2272 23.8554 15.2288 25.1988 14.3021 25.7543L2.17167 33.0266Z" class="fill-text-secondary transition group-hover/logo-link:fill-text-primary"></path><path d="M24.5299 18.9854C24.9293 19.25 25.1694 19.6972 25.1694 20.1763V28.8607C25.1694 29.3389 24.9301 29.7854 24.5319 30.0503L0.648646 45.9339C-0.52897 46.7171 0.0254797 48.552 1.43975 48.552H16.1697C16.4491 48.552 16.7223 48.4701 16.9556 48.3164L36.3744 35.5231C36.7756 35.2588 37.0171 34.8106 37.0171 34.3301V14.781C37.0171 14.2968 36.7717 13.8455 36.3653 13.5821L16.6096 0.781668C16.3782 0.631764 16.1084 0.552002 15.8328 0.552002L1.45448 0.552015C0.0389831 0.552017 -0.514577 2.38954 0.665366 3.17143L24.5299 18.9854Z" class="fill-text-secondary transition group-hover/logo-link:fill-text-primary"></path></svg></a></li><li><button id="radix-_R_knlb_-trigger-radix-_R_jknlb_" data-state="closed" aria-expanded="false" class="hover-bg group/menu-trigger relative inline-flex w-max items-center justify-center rounded-full bg-transparent px-4 py-2 text-text-secondary transition-colors hover:bg-bg-idle hover:text-text-primary focus:outline-none active:bg-bg-active active:text-text-primary disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-bg-idle data-active:text-text-primary data-[state=open]:text-text-primary" style="--hover-bg-left:0px;--hover-bg-top:0px" data-radix-collection-item="">Apps<!-- --> <svg aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current relative ml-2 size-4 transition-transform group-data-[state=open]/menu-trigger:rotate-180"><title>ChevronDown icon</title><path d="m6 9 6 6 6-6"></path></svg></button></li><li><a class="hover-bg relative flex flex-row items-center whitespace-nowrap rounded-full px-4 py-2 text-text-secondary transition-colors hover:bg-bg-idle hover:text-text-primary focus:outline-none active:bg-bg-active active:text-text-primary disabled:pointer-events-none disabled:opacity-50 before:rounded-full" style="--hover-bg-left:0px;--hover-bg-top:0px" data-radix-collection-item="" href="/blogs">Blog</a></li><li><a class="hover-bg relative flex flex-row items-center whitespace-nowrap rounded-full px-4 py-2 text-text-secondary transition-colors hover:bg-bg-idle hover:text-text-primary focus:outline-none active:bg-bg-active active:text-text-primary disabled:pointer-events-none disabled:opacity-50 before:rounded-full" style="--hover-bg-left:0px;--hover-bg-top:0px" href="https://github.com/sponsors/joulev" target="_blank" rel="noreferrer noopener" data-radix-collection-item="">Sponsor</a></li></ul></div><div class="absolute top-full flex justify-center md:left-1/2 md:-translate-x-1/2"></div></nav></div><footer class="px-6 pb-12 flex flex-row justify-center text-xs text-text-tertiary"><div class="backdrop-blur bg-bg-darker px-3 py-1 rounded"><a class="transition hover:text-text-secondary" target="_blank" rel="noreferrer noopener" href="https://github.com/joulev/website/commit/1311e11c488f798117dce134d4f7441bc4df110b"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="[&_path]:stroke-2 [&_path]:[stroke-linecap:round] [&_path]:[stroke-linejoin:round] [&_path]:stroke-current inline size-3"><title>GitHub icon</title><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85m0 0v4m0-4c-4.51 2-5-2-7-2"></path></svg> joulev/website@<span class="font-mono">1311e11</span></a></div></footer><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$-->
vendor: 108 bytes, line 90
90<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
90<script src="/_next/static/chunks/14gni4magx9_7.js" id="_R_" async=""></script>
90<script>(self.__next_f=self.__next_f||[]).push([0])</script>
90<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[339756,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"default\"]\n3:I[758298,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/3xtsf27fdenpv.js\"],\"default\"]\n4:I[837457,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"default\"]\n5:I[522016,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"\"]\n6:I[467494,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"VersionFooter\"]\n7:I[443880,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"Analytics\"]\n8:I[957215,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"SpeedInsights\"]\n9:I[895447,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"AxiomWebVitals\"]\na:I[92825,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"ClientSegmentRoot\"]\nb:I[148053,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\"],\"default\"]\n16:I[168027,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0aoa-axcmnzjd.css\",\"style\"]\n:HL[\"/_next/static/media/bold.p.24l13l5t-k6l6.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/bolditalic.p.0ynr3dgi_pqnx.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/c47649aa31f9e140-s.p.3lxpqujs87tck.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/italic.p.2wurv2__1kp41.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/regular.p.1tzvrla_jnz37.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/404.0bgs5qt365db-.webp\",\"image\"]\n"])</script>
90<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"glui\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(public)\",{\"children\":[\"glui\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0aoa-axcmnzjd.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/3yal63karjxdl.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/1m5ykreap-f2c.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0p03d770byi7o.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"hanken_grotesk_ad61473d-module__EPO_hG__variable mono_6151a79f-module__wDZ00a__variable bg-bg-site-bg font-sans text-text-primary\",\"children\":[[\"$\",\"div\",null,{\"className\":\"fixed inset-0 -z-50 pattern-cross pattern-text-tertiary pattern-bg-bg-site-bg pattern-size-6\"}],[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$3\",\"errorStyles\":[],\"errorScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/3xtsf27fdenpv.js\",\"async\":true}]],\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"img\",null,{\"src\":\"/_next/static/media/404.0bgs5qt365db-.webp\",\"className\":\"h-48 mx-auto mb-4 mt-[calc(50dvh-(192px+16px+24px)/2)]\",\"alt\":\"404 Not Found\"}],[\"$\",\"div\",null,{\"className\":\"fixed bottom-0 inset-x-0 border-t border-separator bg-bg-darker p-6 backdrop-blur text-sm text-text-secondary flex flex-col gap-2 [\u0026_a]:error-page-link\",\"children\":[[\"$\",\"p\",null,{\"children\":[\"The page you tried to access could not be found.\",\" \",[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"group whitespace-nowrap\",\"children\":[\"Go back to the home page\",[\"$\",\"span\",null,{\"className\":\"group-hover:translate-x-0.5 transition inline-block\",\"children\":\"Â â\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"404 Not Found image by\",\" \",[\"$\",\"a\",null,{\"href\":\"https://github.com/SAWARATSUKI/KawaiiLogos/blob/b4d112887f2161e4c54d82d30586a62caff48633/ResponseCode/404%20NotFound.png\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"children\":\"SAWARATSUKI\"}]]}]]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{}],[\"$\",\"$L9\",null,{}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/1a-cexoqm_umt.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/2p1-wmiewoku9.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"Component\":\"$b\",\"slots\":{\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"img\",null,{\"src\":\"/_next/static/media/404.0bgs5qt365db-.webp\",\"className\":\"h-48 mx-auto mb-4 mt-[calc(50dvh-(192px+16px+24px)/2)]\",\"alt\":\"404 Not Found\"}],[\"$\",\"div\",null,{\"className\":\"fixed bottom-0 inset-x-0 border-t border-separator bg-bg-darker p-6 backdrop-blur text-sm text-text-secondary flex flex-col gap-2 [\u0026_a]:error-page-link\",\"children\":[[\"$\",\"p\",null,{\"children\":[\"The page you tried to access could not be found.\",\" \",[\"$\",\"$L5\",null,{\"href\":\"/\",\"className\":\"group whitespace-nowrap\",\"children\":[\"Go back to the home page\",[\"$\",\"span\",null,{\"className\":\"group-hover:translate-x-0.5 transition inline-block\",\"children\":\"Â â\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"404 Not Found image by\",\" \",[\"$\",\"a\",null,{\"href\":\"https://github.com/SAWARATSUKI/KawaiiLogos/blob/b4d112887f2161e4c54d82d30586a62caff48633/ResponseCode/404%20NotFound.png\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"children\":\"SAWARATSUKI\"}]]}]]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]},\"serverProvidedParams\":{\"params\":{},\"promises\":[\"$@c\"]}}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"main\",null,{\"className\":\"container max-w-screen-md\",\"children\":[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle backdrop-blur transition flex flex-col p-0\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"div\",null,{\"className\":\"bg-bg-darker pt-36 relative pb-6 sm:pb-12 px-6 sm:px-12\",\"children\":[\"$Ld\",\"$Le\"]}],\"$Lf\"]}]}],[\"$L10\",\"$L11\",\"$L12\"],\"$L13\"]}],{}
90,null,false,null]},null,false,\"$@14\"]},null,false,null]},null,false,null],\"$L15\",false]],\"m\":\"$undefined\",\"G\":[\"$16\",[\"$L17\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"AvaRn4B0uNZWuqfhIzVgR\"}\n"])</script>
90<script>self.__next_f.push([1,"18:I[519455,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"LinkButton\"]\n39:I[897367,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"OutletBoundary\"]\n3a:\"$Sreact.suspense\"\n3d:I[897367,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"ViewportBoundary\"]\n3f:I[897367,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"MetadataBoundary\"]\nd:[\"$\",\"div\",null,{\"className\":\"absolute inset-0 -z-10\",\"style\":{\"backgroundImage\":\"url(\\\"data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='2' cy='2' r='2' fill='%23afafaf70' /%3E%3C/svg%3E\\\")\",\"backgroundPosition\":\"13px 16px\",\"maskImage\":\"linear-gradient(to top right, #0000 0%, #0003 50%, #000 100%)\",\"WebkitMaskImage\":\"linear-gradient(to top right, #0000 0%, #0003 50%, #000 100%)\"}}]\n"])</script>
90<script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"flex flex-row items-baseline gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-3xl font-medium\",\"children\":\"glui\"}],[\"$\",\"span\",null,{\"className\":\"cursor-default select-none self-center rounded-full bg-bg-idle px-3 py-1 text-sm text-text-secondary\",\"children\":\"work in progress\"}]]}],[\"$\",\"div\",null,{\"className\":\"text-lg text-text-secondary\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-lg text-text-secondary\",\"children\":[\"A component collection based on\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://www.figma.com/community/file/1253443272911187215/apple-design-resources-visionos\",\"className\":\"link\",\"children\":\"visionOS UI design system\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\" \",\"and built using \",[\"$\",\"$L5\",null,{\"href\":\"https://radix-ui.com/\",\"className\":\"link\",\"children\":\"Radix UI\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\",\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://tailwindcss.com/\",\"className\":\"link\",\"children\":\"Tailwind CSS\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\" and\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://ui.shadcn.com/\",\"className\":\"link\",\"children\":\"shadcn/ui\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\".\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col items-stretch gap-x-6 gap-y-3 sm:flex-row\",\"children\":[[\"$\",\"$L18\",null,{\"className\":\"w-full sm:w-auto\",\"variants\":{\"variant\":\"primary\"},\"href\":\"https://github.com/joulev/website/tree/main/src/components/ui\",\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"GitHub icon\"}],[\"$\",\"path\",null,{\"d\":\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85m0 0v4m0-4c-4.51 2-5-2-7-2\"}]]}],\" Component sources\"]}],[\"$\",\"$L18\",null,{\"className\":\"w-full sm:w-auto\",\"href\":\"https://github.com/joulev/glui-starter\",\"children\":\"Starter template\"}]]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"f:[\"$\",\"div\",null,{\"className\":\"py-12 px-6 sm:px-12\",\"children\":[\"$\",\"article\",null,{\"className\":\"prose min-w-full\",\"children\":[[\"$\",\"h2\",null,{\"id\":\"prerequisites\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#prerequisites\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Prerequisites\"]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"glui is a component collection based on \",[\"$\",\"$L5\",null,{\"href\":\"https://ui.shadcn.com\",\"className\":\"link\",\"children\":\"shadcn/ui\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\". As such, all prerequisites of shadcn/ui apply to glui as well. In other words, you have to use \",[\"$\",\"$L5\",null,{\"href\":\"https://nextjs.org\",\"className\":\"link\",\"children\":\"Next.js\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\", \",[\"$\",\"$L5\",null,{\"href\":\"https://react.dev\",\"className\":\"link\",\"children\":\"React\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\" and \",[\"$\",\"$L5\",null,{\"href\":\"https://tailwindcss.com\",\"className\":\"link\",\"children\":\"Tailwind CSS\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\". Support for other frameworks and libraries is not planned.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"You are advised to be familiar with Tailwind CSS before using this collection.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"It is also recommended that you use TypeScript. Only basic understanding of TypeScript is required. All the components are written in TypeScript, and I don't provide the JavaScript versions for them, so if for some reasons you don't know basic TypeScript and are not willing to learn it, at least you should learn how to remove typings to convert the provided TypeScript files into JavaScript.\"}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"installation\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#installation\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Installation\"]}]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"this-collection-is-not-a-published-package\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#this-collection-is-not-a-published-package\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"This collection is not a published package\"]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"This collection is distributed via copy-paste, not via a central package registry such as NPM. In other words, you do \",[\"$\",\"strong\",null,{\"children\":\"not\"}],\" do something like \",[\"$\",\"code\",null,{\"children\":\"npm install @joulev/glui\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" to add the collection to your project. You just need to copy-paste the necessary components to use it as your own components. This is the same distribution method as shadcn/ui.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Why copy-paste? You as the user will own the components and can make changes to them as you like. You can also easily remove the components you don't need. This means you have complete control over all glui components. For more information, check \",\"$L19\",\".\"]}],\"\\n\",\"$L1a\",\"\\n\",\"$L1b\",\"\\n\",\"$L1c\",\"\\n\",\"$L1d\",\"\\n\",\"$L1e\",\"\\n\",\"$L1f\",\"\\n\",\"$L20\",\"\\n\",\"$L21\",\"\\n\",\"$L22\",\"\\n\",\"$L23\",\"\\n\",\"$L24\",\"\\n\",\"$L25\",\"\\n\",\"$L26\",\"\\n\",\"$L27\",\"\\n\",\"$L28\",\"\\n\",\"$L29\",\"\\n\",\"$L2a\",\"\\n\",\"$L2b\",\"\\n\",\"$L2c\",\"\\n\",\"$L2d\",\"\\n\",\"$L2e\",\"\\n\",\"$L2f\",\"\\n\",\"$L30\",\"\\n\",\"$L31\",\"\\n\",\"$L32\",\"\\n\",\"$L33\",\"\\n\",\"$L34\",\"\\n\",\"$L35\",\"\\n\",\"$L36\",\"\\n\",\"$L37\",\"\\n\",\"$L38\"]}]}]\n"])</script>
90<script>self.__next_f.push([1,"10:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/31plt5z8s7d6v.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n11:[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/04g4-k9o9pci1.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n12:[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/2t2kvq8r1t299.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n13:[\"$\",\"$L39\",null,{\"children\":[\"$\",\"$3a\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@3b\"}]}]\n3c:[]\n14:\"$W3c\"\n15:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L3d\",null,{\"children\":\"$L3e\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L3f\",null,{\"children\":[\"$\",\"$3a\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L40\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n17:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0aoa-axcmnzjd.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\nc:\"$0:f:0:1:1:children:0:props:children:1:props:serverProvidedParams:params\"\n"])</script>
90<script>self.__next_f.push([1,"47:I[519455,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"Button\"]\n48:I[776639,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"Dialog\"]\n49:I[776639,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DialogTrigger\"]\n4a:I[776639,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DialogContent\"]\n4b:I[776639,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DialogHeader\"]\n4c:I[776639,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DialogTitle\"]\n4d:I[776639,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DialogDescription\"]\n4e:I[776639,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DialogFooter\"]\n4f:I[776639,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DialogClose\"]\n50:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenu\"]\n51:I[755146,[\"/_next/static/chunks/3
90yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1"])</script>
90<script>self.__next_f.push([1,"xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuTrigger\"]\n52:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuContent\"]\n53:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuLabel\"]\n54:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuSeparator\"]\n55:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuGroup\"]\n56:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuItem\"]\n57:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuShortcut\"]\n58:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuSub\"]\n59:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuSubTrigger\"]\n5a:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuPortal\"]\n5b:I[755146,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/"])</script>
90<script>self.__next_f.push([1,"_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownMenuSubContent\"]\n62:I[187247,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"ControlledInputShowcase\"]\n63:I[857408,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"List\"]\n64:I[857408,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"ListHeader\"]\n65:I[857408,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"ListContent\"]\n66:I[857408,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"ListItem\"]\n67:I[947755,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"NavigationMenu\"]\n68:I[947755,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"NavigationMenuList\"]\n69:I[947755,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"NavigationMenuItem\"]\n6a:I[947755,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"NavigationMenuTrigger\"]\n6b:I[947755,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"NavigationMenuContent\"]\n6c:I[947755,[\"/_next/static/chunks/3
90yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/st"])</script>
90<script>self.__next_f.push([1,"atic/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"NavigationMenuLink\"]\n72:I[168148,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"Progress\"]\n73:I[967489,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"Select\"]\n74:I[967489,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SelectTrigger\"]\n75:I[967489,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SelectValue\"]\n76:I[967489,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SelectContent\"]\n77:I[967489,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SelectGroup\"]\n78:I[967489,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SelectLabel\"]\n79:I[967489,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SelectItem\"]\n7a:I[967489,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SelectSeparator\"]\n7b:I[530909,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/st"])</script>
90<script>self.__next_f.push([1,"atic/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"Sidebar\"]\n7c:I[530909,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SidebarHeader\"]\n7d:I[530909,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SidebarHeaderTitle\"]\n7e:I[530909,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SidebarSection\"]\n7f:I[530909,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SidebarSectionHeading\"]\n80:I[530909,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SidebarSectionItems\"]\n81:I[530909,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SidebarSectionItem\"]\n82:I[530909,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SidebarSectionItemName\"]\n83:I[530909,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"SidebarSectionItemCounter\"]\n88:I[367692,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"Slider\"]\n89:I[187247,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"ControlledTextAreaShowcase\"]\n19:[\"$\",\"$L5\",null,{\"href\":\"https://ui.shadcn.com/do"])</script>
90<script>self.__next_f.push([1,"cs#faq\",\"className\":\"link\",\"children\":\"shadcn/ui's reasons behind this distribution method\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}]\n1a:[\"$\",\"h3\",null,{\"id\":\"installation-from-scratch\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#installation-from-scratch\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Installation from scratch\"]}]}]\n1b:[\"$\",\"p\",null,{\"children\":[\"You can simply use \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/joulev/glui-starter\",\"className\":\"link\",\"children\":\"this starter repository\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\" to get started. It has all the necessary configurations and basic setups, with two components preinstalled (link and card). Other components can then be installed normally by copy-
90pasting.\"]}]\n1c:[\"$\",\"h3\",null,{\"id\":\"installation-to-an-existing-project\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#installation-to-an-existing-project\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Installation to an existing project\"]}]}]\n1d:[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Warning:\"}],\" It is not easy and you need some level of experience with Tailwind CSS custom configurations to continue.\"]}]\n"])</script>
90<script>self.__next_f.push([1,"1e:[\"$\",\"ol\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":\"Ensure that project meets the prerequisites above.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"I will assume you use the \",[\"$\",\"code\",null,{\"children\":\"src\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" directory in your Next.js app. If you don't use \",[\"$\",\"code\",null,{\"children\":\"src\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\", simply remove it from the paths in the following steps.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Install the necessary dependencies: \",[\"$\",\"code\",null,{\"children\":\"npm install [email protected] tailwind-merge tailwindcss-animate\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" â you can use yarn, pnpm or bun if you prefer.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"If you already have the following files in your project, modify them to also integrate the corresponding files from \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/joulev/glui-starter\",\"className\":\"link\",\"children\":\"the starter repository\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\". If you do not have those files in your project yet, copy the files from the starter repository to your project.\"]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"tailwind.config.ts\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" or an equivalent Tailwind CSS configuration file\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"postcss.config.js\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\"Â â glui requires you to configure PostCSS to also \",[\"$\",\"$L5\",null,{\"href\":\"https://tailwindcss.com/docs/using-with-preprocessors#nesting\",\"className\":\"link\",\"children\":\"allow CSS nesting\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}]]}],\"\\n\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Global CSS file, which is most likely placed in \",[\"$\",\"code\",null,{\"children\":\"src/app/globals.css\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}]]}],\"\\n\"]}],\"\\n\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Copy the following files from \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/joulev/glui-starter\",\"className\":\"link\",\"children\":\"the starter repository\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\":\"]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"src/types/fix/react.ts\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\": This file is a patch to the React typings to make TypeScript accept CSS variables in the \",\"$L41\",\" prop of HTML elements. If you don't use TypeScript, you can ignore this file.\"]}],\"\\n\"]}],\"\\n\",\"$L42\",\"\\n\",\"$L43\",\"\\n\"]}],\"\\n\"]}],\"\\n\",\"$L44\",\"\\n\",\"$L45\",\"\\n\",\"$L46\",\"\\n\"]}]\n"])</script>
90<script>self.__next_f.push([1,"1f:[\"$\",\"h3\",null,{\"id\":\"copy-pasting-components\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#copy-pasting-components\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Copy-pasting components\"]}]}]\n20:[\"$\",\"p\",null,{\"children\":[\"The component sources can be found in \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/joulev/website/tree/main/src/components/ui\",\"className\":\"link\",\"children\":\"the repository for this website\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\". Select the one you want, then copy the file to under \",[\"$\",\"code\",null,{\"children\":\"src/components/ui\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" in your project.\"]}]\n21:[\"$\",\"p\",null,{\"children\":[\"For example, to install the \",[\"$\",\"code\",null,{\"children\":\"Link\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" component, simply create \",[\"$\",\"code\",null,{\"children\":\"src/components/ui/link.tsx\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" with the same content as \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/joulev/website/blob/main/src/components/ui/link.tsx\",\"className\":\"link\",\"children\":\"the source file\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\".\"]}]\n22:[\"$\",\"p\",null,{\"children\":\"You might need to update the import statements in the copied files to match your project's directory structure.\"}]\n"])</script>
90<script>self.__next_f.push([1,"23:[\"$\",\"p\",null,{\"children\":[\"Note that some components have dependencies. For example, \",[\"$\",\"code\",null,{\"children\":\"Button\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" depends on \",[\"$\",\"code\",null,{\"children\":\"Link\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\", so if you want to install \",[\"$\",\"code\",null,{\"children\":\"Button\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" you also need to ensure \",[\"$\",\"code\",null,{\"children\":\"Link\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" has been installed. Another example would be the \",[\"$\",\"code\",null,{\"children\":\"Tweet\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" component, which requires \",[\"$\",\"$L5\",null,{\"href\":\"https://react-tweet.vercel.app\",\"className\":\"link\",\"children\":[\"$\",\"code\",null,{\"children\":\"react-tweet\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\", so you need to install this package for the component to work.\"]}]\n"])</script>
90<script>self.__next_f.push([1,"24:[\"$\",\"h2\",null,{\"id\":\"components\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#components\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Components\"]}]}]\n25:[\"$\",\"p\",null,{\"children\":[\"You can check \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/joulev/website/blob/main/src/app/(public)/glui/components.tsx\",\"className\":\"link\",\"children\":\"the example usage of all components\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\" to see how to use them. Yeah I should put the source code of the examples here, but I'm too lazy to do that. Maybe later.\"]}]\n26:[\"$\",\"p\",null,{\"children\":\"Anyway, most components are based on shadcn/ui, hence the usage should be identical to the shadcn/ui counterparts.\"}]\n"])</script>
90<script>self.__next_f.push([1,"27:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"buttons\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#buttons\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Buttons\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6\",\"children\":[[\"$\",\"div\",\"sm\",{\"className\":\"flex flex-row flex-wrap gap-3\",\"children\":[[\"$\",\"$L47\",\"primary\",{\"variants\":{\"variant\":\"primary\",\"size\":\"sm\"},\"children\":\"Primary\"}],[\"$\",\"$L47\",\"secondary\",{\"variants\":{\"variant\":\"secondary\",\"size\":\"sm\"},\"children\":\"Secondary\"}],[\"$\",\"$L47\",\"ghost\",{\"variants\":{\"variant\":\"ghost\",\"size\":\"sm\"},\"children\":\"Ghost\"}]]}],[\"$\",\"div\",\"md\",{\"className\":\"flex flex-row flex-wrap gap-3\",\"children\":[[\"$\",\"$L47\",\"primary\",{\"variants\":{\"variant\":\"primary\",\"size\":\"md\"},\"children\":\"Primary\"}],[\"$\",\"$L47\",\"secondary\",{\"variants\":{\"variant\":\"secondary\",\"size\":\"md\"},\"children\":\"Secondary\"}],[\"$\",\"$L47\",\"ghost\",{\"variants\":{\"variant\":\"ghost\",\"size\":\"md\"},\"children\":\"Ghost\"}]]}],[\"$\",\"div\",\"lg\",{\"className\":\"flex flex-row flex-wrap gap-3\",\"children\":[[\"$\",\"$L47\",\"primary\",{\"variants\":{\"variant\":\"primary\",\"size\":\"lg\"},\"children\":\"Primary\"}],[\"$\",\"$L47\",\"secondary\",{\"variants\":{\"variant\":\"secondary\",\"size\":\"lg\"},\"children\":\"Secondary\"}],[\"$\",\"$L47\",\"ghost\",{\"variants\":{\"variant\":\"ghost\",\"size\":\"lg\"},\"children\":\"Ghost\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-row flex-wrap gap-3\",\"children\":[[\"$\",\"$L47\",null,{\"disabled\":true,\"children\":\"Disabled\"}],[\"$\",\"$L47\",null,{\"variants\":{\"size\":\"icon-md\"},\"children\":[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"User icon\"}],[\"$\",\"path\",null,{\"d\":\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z\"}]]}]}],[\"$\",\"$L47\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"User icon\"}],\"$27:props:children:1:props:children:1:props:children:1:props:children:props:children:1\"]}],\" User\"]}],[\"$\",\"$L18\",null,{\"href\":\"https://example.com\",\"children\":\"Link\"}]]}]]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"28:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"cards\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#cards\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Cards\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"div\",null,{\"children\":\"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non doloribus iure porro, sunt dolore eius, delectus reprehenderit maiores iste temporibus, praesentium repudiandae quod. Sapiente nesciunt, exercitationem, libero ipsa nam molestias nostrum quidem labore earum deleniti, impedit nemo consequatur unde ut facilis?\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-row justify-end gap-3\",\"children\":[[\"$\",\"$L47\",null,{\"children\":\"Cancel\"}],[\"$\",\"$L47\",null,{\"variants\":{\"variant\":\"primary\"},\"children\":\"Submit\"}]]}]]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"29:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"dialog\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#dialog\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Dialog\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition gap-6 not-prose backdrop-blur-none flex flex-row justify-center py-12\",\"ref\":\"$undefined\",\"children\":[\"$\",\"$L48\",null,{\"children\":[[\"$\",\"$L49\",null,{\"asChild\":true,\"children\":[\"$\",\"$L47\",null,{\"children\":\"About Lipsum\"}]}],[\"$\",\"$L4a\",null,{\"className\":\"sm:max-w-md\",\"children\":[[\"$\",\"$L4b\",null,{\"children\":[[\"$\",\"$L4c\",null,{\"children\":\"Lipsum\"}],[\"$\",\"$L4d\",null,{\"children\":[\"Lorem Ipsum is simply dummy text of the printing and typesetting industry.\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://lipsum.com\",\"className\":\"link\",\"children\":\"Source\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}]]}]]}],[\"$\",\"div\",null,{\"children\":\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies nulla ut leo blandit congue. Duis eleifend, sapien eget tristique bibendum, elit massa tempus diam, eleifend porta nunc justo in ante. Integer vitae blandit neque.\"}],[\"$\",\"$L4e\",null,{\"children\":[[\"$\",\"$L4f\",null,{\"asChild\":true,\"children\":[\"$\",\"$L47\",null,{\"className\":\"w-full sm:w-auto\",\"children\":\"Cancel\"}]}],[\"$\",\"$L47\",null,{\"className\":\"w-full sm:w-auto\",\"variants\":{\"variant\":\"primary\"},\"children\":\"Submit\"}]]}]]}]]}]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"2a:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"dropdown\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#dropdown\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Dropdown\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition flex-col gap-6 not-prose backdrop-blur-none grid grid-cols-1 sm:grid-cols-3\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid place-items-center py-9\",\"children\":[\"$\",\"$L50\",null,{\"children\":[[\"$\",\"$L51\",null,{\"asChild\":true,\"children\":[\"$\",\"$L47\",null,{\"children\":[\"Normal\",[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"ChevronDown icon\"}],[\"$\",\"path\",null,{\"d\":\"m6 9 6 6 6-6\"}]]}]]}]}],[\"$\",\"$L52\",null,{\"className\":\"w-52\",\"children\":[[\"$\",\"$L53\",null,{\"children\":\"My Account\"}],[\"$\",\"$L54\",null,{}],[\"$\",\"$L55\",null,{\"children\":[[\"$\",\"$L56\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"User icon\"}],\"$27:props:children:1:props:children:1:props:children:1:props:children:props:children:1\"]}],[\"$\",\"span\",null,{\"children\":\"Profile\"}],[\"$\",\"$L57\",null,{\"children\":\"â§âP\"}]]}],[\"$\",\"$L56\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"CreditCard icon\"}],[\"$\",\"path\",null,{\"d\":\"M2 10h20M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z\"}]]}],[\"$\",\"span\",null,{\"children\":\"Billing\"}],[\"$\",\"$L57\",null,{\"children\":\"âB\"}]]}],[\"$\",\"$L56\",null,{\"disabled\":true,\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Cloud icon\"}],[\"$\",\"path\",null,{\"d\":\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z\"}]]}],[\"$\",\"span\",null,{\"children\":\"API\"}]]}]]}],[\"$\",\"$L54\",null,{}],[\"$\",\"$L55\",null,{\"children\":[[\"$\",\"$L58\",null,{\"children\":[[\"$\",\"$L59\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"UserPlus icon\"}],[\"$\",\"path\",null,{\"d\":\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M19 8v6m3-3h-6m-3-4a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z\"}]]}],[\"$\",\"span\",null,{\"children\":\"Invite users\"}]]}],[\"$\",\"$L5a\",null,{\"children\":[\"$\",\"$L5b\",null,{\"children\":[[\"$\",\"$L56\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Mail icon\"}],[\"$\",\"path\",null,{\"d\":\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7m2-3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z\"}]]}],[\"$\",\"span\",null,{\"children\":\"Email\"}]]}],[\"$\",\"$L56\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\"
90:\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"MessageSquare icon\"}],[\"$\",\"path\",null,{\"d\":\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10Z\"}]]}],[\"$\",\"span\",null,{\"children\":\"Message\"}]]}],[\"$\",\"$L54\",null,{}],[\"$\",\"$L56\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"PlusCircle icon\"}],[\"$\",\"path\",null,{\"d\":\"M8 12h8m-4-4v8m10-4c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z\"}]]}],\"$L5c\"]}]]}]}]]}],\"$L5d\"]}],\"$L5e\",\"$L5f\"]}]]}]}],\"$L60\",\"$L61\"]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"2b:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"input\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#input\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Input\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition flex-col not-prose backdrop-blur-none grid grid-cols-1 gap-6 sm:grid-cols-2\",\"ref\":\"$undefined\",\"children\":[\"$\",\"$L62\",null,{}]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"2c:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"links\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#links\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Links\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"p\",null,{\"children\":[\"The \",[\"$\",\"strong\",null,{\"children\":\"Big Bang\"}],\" event is a\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://en.wikipedia.org/wiki/Physical_theory\",\"className\":\"link\",\"children\":\"physical theory\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\" that describes how the\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://en.wikipedia.org/wiki/Expansion_of_the_universe\",\"className\":\"link\",\"children\":\"universe expanded\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\" \",\"from an initial state of high\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://en.wikipedia.org/wiki/Energy_density\",\"className\":\"link\",\"children\":\"density\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\" and\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://en.wikipedia.org/wiki/Temperature\",\"className\":\"link\",\"children\":\"temperature\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],\".\"]}],[\"$\",\"p\",null,{\"children\":[\"$\",\"$L5\",null,{\"href\":\"https://en.wikipedia.org/wiki/Big_Bang\",\"className\":\"link\",\"children\":\"Click this link to read the full article on the Big Bang, while I make this link ridiculously long to show how the component works with line breaks.\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}]}]]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"2d:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"list\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#list\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"List\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition flex-col not-prose backdrop-blur-none grid grid-cols-1 gap-9 sm:grid-cols-2\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"$L63\",null,{\"children\":[[\"$\",\"$L64\",null,{\"children\":\"Title\"}],[\"$\",\"$L65\",null,{\"children\":[[\"$\",\"$L66\",\"0\",{\"children\":[\"Item \",1]}],[\"$\",\"$L66\",\"1\",{\"children\":[\"Item \",2]}],[\"$\",\"$L66\",\"2\",{\"children\":[\"Item \",3]}],[\"$\",\"$L66\",\"3\",{\"children\":[\"Item \",4]}],[\"$\",\"$L66\",\"4\",{\"children\":[\"Item \",5]}]]}]]}],[\"$\",\"$L63\",null,{\"children\":[[\"$\",\"$L64\",null,{\"children\":\"Title\"}],[\"$\",\"$L65\",null,{\"variants\":{\"variant\":\"plain\"},\"children\":[[\"$\",\"$L66\",\"0\",{\"children\":[\"Item \",1]}],[\"$\",\"$L66\",\"1\",{\"children\":[\"Item \",2]}],[\"$\",\"$L66\",\"2\",{\"children\":[\"Item \",3]}],[\"$\",\"$L66\",\"3\",{\"children\":[\"Item \",4]}],[\"$\",\"$L66\",\"4\",{\"children\":[\"Item \",5]}]]}]]}]]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"2e:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"navigation-menu\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#navigation-menu\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Navigation Menu\"]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center not-prose\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"$L67\",null,{\"className\":\"**:data-navigation-menu-viewport:backdrop-blur-none\",\"children\":[\"$\",\"$L68\",null,{\"className\":\"backdrop-blur-none\",\"children\":[[\"$\",\"$L69\",null,{\"children\":[[\"$\",\"$L6a\",null,{\"children\":\"Getting started\"}],[\"$\",\"$L6b\",null,{\"children\":[\"$\",\"ul\",null,{\"className\":\"grid grid-cols-1 md:grid-cols-2 lg:w-[500px]\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex h-full w-full select-none flex-col justify-end bg-bg-darker p-6 no-underline outline-none\",\"unstyled\":true,\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-2 mt-4 text-lg font-medium\",\"children\":\"glui\"}],[\"$\",\"p\",null,{\"className\":\"text-sm leading-tight text-text-secondary\",\"children\":\"Glassmorphic component collection based on visionOS UI design system\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 p-3\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-semibold leading-none\",\"children\":\"Introduction\"}],[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm leading-snug text-text-secondary\",\"children\":\"Re-usable components built using Radix UI and Tailwind CSS.\"}]]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-semibold leading-none\",\"children\":\"Installation\"}],[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm leading-snug text-text-secondary\",\"children\":\"How to install dependencies and structure your app.\"}]]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-semibold leading-none\",\"children\":\"Typography\"}],[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm leading-snug text-text-secondary\",\"children\":\"Styles for headings, paragraphs, lists...etc\"}]]}]}]]}]]}]}]]}],[\"$\",\"$L69\",null,{\"children\":[[\"$\",\"$L6a\",null,{\"children\":\"Components\"}],[\"$\",\"$L6b\",null,{\"children\":[\"$\",\"ul\",null,{\"className\":\"grid gap-3 p-3 md:grid-cols-2 lg:w-[600px]\",\"children\":[[\"$\",\"li\",\"Alert Dialog\",{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-semibold leading-none\",\"children\":\"Alert Dialog\"}],[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm leading-snug text-text-secondary\",\"children\":\"A modal dialog that interrupts the user with important content and expects a response.\"}]]}]}],[\"$\",\"li\",\"Hover Card\",{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-semibold leading-none\",\"children\":\"Hover Card\"}],[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm leading-snug text-text-secondary\",\"children\":\"For sighted users to preview content available behind a link.\"}]]}]}],[\"$\",\"li\",\"Progress\",{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-semibold leading-none\",\"children\":\"Progress\"}],[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm leading-snug text-text-secondary\",\"children\":\"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\"}]]}]}],\"$L6d\",\"$L6e\",\"$L6f\"]}]}]]}],\"$L70\"]}]}]}],\"$L71\"]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"2f:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"progress\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#progress\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Progress\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none\",\"ref\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto flex w-64 flex-col gap-6\",\"children\":[[\"$\",\"$L72\",\"0\",{\"value\":0}],[\"$\",\"$L72\",\"0.2\",{\"value\":0.2}],[\"$\",\"$L72\",\"0.4\",{\"value\":0.4}],[\"$\",\"$L72\",\"0.6\",{\"value\":0.6}],[\"$\",\"$L72\",\"0.8\",{\"value\":0.8}],[\"$\",\"$L72\",\"1\",{\"value\":1}]]}]}]]}]\n30:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"select\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#select\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Select\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition gap-6 not-prose backdrop-blur-none flex flex-row justify-center py-12\",\"ref\":\"$undefined\",\"children\":[\"$\",\"$L73\",null,{\"children\":[[\"$\",\"$L74\",null,{\"className\":\"w-[240px]\",\"children\":[\"$\",\"$L75\",null,{\"placeholder\":\"Select a fruit\"}]}],[\"$\",\"$L76\",null,{\"children\":[[\"$\",\"$L77\",null,{\"children\":[[\"$\",\"$L78\",null,{\"children\":\"Fruits\"}],[\"$\",\"$L79\",null,{\"value\":\"apple\",\"children\":\"Apple\"}],[\"$\",\"$L79\",null,{\"value\":\"banana\",\"children\":\"Banana\"}]]}],[\"$\",\"$L7a\",null,{}],[\"$\",\"$L77\",null,{\"children\":[[\"$\",\"$L78\",null,{\"children\":\"Vegetables\"}],[\"$\",\"$L79\",null,{\"value\":\"broccoli\",\"children\":\"Broccoli\"}],[\"$\",\"$L79\",null,{\"value\":\"carrot\",\"disabled\":true,\"children\":\"Carrot\"}]]}]]}]]}]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"31:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"sidebar\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#sidebar\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Sidebar\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle transition flex flex-col gap-6 not-prose backdrop-blur-none p-0\",\"ref\":\"$undefined\",\"children\":[\"$\",\"$L7b\",null,{\"className\":\"w-64\",\"children\":[[\"$\",\"$L7c\",null,{\"children\":[[\"$\",\"$L7d\",null,{\"children\":\"My notes\"}],[\"$\",\"$L47\",null,{\"children\":\"Edit\"}]]}],[\"$\",\"$L7e\",null,{\"children\":[[\"$\",\"$L7f\",null,{\"hideCollapseButton\":true,\"children\":\"Study\"}],[\"$\",\"$L80\",null,{\"children\":[[\"$\",\"$L81\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Sigma icon\"}],[\"$\",\"path\",null,{\"d\":\"M18 7V4H6l6 8-6 8h12v-3\"}]]}],[\"$\",\"$L82\",null,{\"children\":\"Mathematics\"}],[\"$\",\"$L83\",null,{\"children\":\"3\"}]]}],[\"$\",\"$L81\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round]\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Atom icon\"}],[[\"$\",\"mask\",null,{\"id\":\"a\",\"children\":[[\"$\",\"rect\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"black\"}],[\"$\",\"path\",null,{\"stroke\":\"white\",\"d\":\"M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"}],[\"$\",\"path\",null,{\"stroke\":\"white\",\"d\":\"M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z\"}],[\"$\",\"path\",null,{\"stroke\":\"white\",\"d\":\"M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z\"}]]}],[\"$\",\"rect\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"currentColor\",\"mask\":\"url(#a)\"}]]]}],[\"$\",\"$L82\",null,{\"children\":\"Physics\"}],[\"$\",\"$L83\",null,{\"children\":\"2\"}]]}],[\"$\",\"$L81\",null,{\"active\":true,\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"FlaskConical icon\"}],[\"$\",\"path\",null,{\"d\":\"M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2M8.5 2h7M7 16h10\"}]]}],[\"$\",\"$L82\",null,{\"children\":\"Chemistry\"}],[\"$\",\"$L83\",null,{\"children\":\"1 new\"}]]}]]}]]}],[\"$\",\"$L7e\",null,{\"isCollapsedInitially\":true,\"children\":[[\"$\",\"$L7f\",null,{\"children\":\"Gaming notes\"}],[\"$\",\"$L80\",null,{\"children\":[[\"$\",\"$L81\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Gamepad2 icon\"}],[\"$\",\"path\",null,{\"d\":\"M6 11h4M8 9v4m7-1h.01M18 10h.01m-.69-5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5Z\"}]]}],[\"$\",\"$L82\",null,{\"children\":\"Game release dates\"}]]}],[\"$\",\"$L81\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\"
90:\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Swords icon\"}],[\"$\",\"path\",null,{\"d\":\"M14.5 17.5 3 6V3h3l11.5 11.5M13 19l6-6m-3 3 4 4m-1 1 2-2M14.5 6.5 18 3h3v3l-3.5 3.5M5 14l4 4m-2-1-3 3m-1-1 2 2\"}]]}],[\"$\",\"$L82\",null,{\"children\":\"Honkai: Star Rail build guide\"}],[\"$\",\"$L83\",null,{\"children\":\"5\"}]]}]]}]]}],[\"$\",\"$L7e\",null,{\"children\":[[\"$\",\"$L7f\",null,{\"children\":\"Miscellaneous\"}],[\"$\",\"$L80\",null,{\"children\":[[\"$\",\"$L81\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[\"$L84\",\"$L85\"]}],\"$L86\"]}],\"$L87\"]}]]}]]}]}]]}]\n"])</script>
90<script>self.__next_f.push([1,"32:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"slider\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#slider\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Slider\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none\",\"ref\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto my-12 w-64\",\"children\":[\"$\",\"$L88\",null,{\"defaultValue\":[33],\"max\":100,\"step\":1}]}]}]]}]\n33:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"textarea\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#textarea\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"TextArea\"]}]}],[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition flex flex-col gap-6 not-prose backdrop-blur-none\",\"ref\":\"$undefined\",\"children\":[\"$\",\"$L89\",null,{}]}]]}]\n34:[\"$\",\"section\",null,{\"children\":[[\"$\",\"h3\",null,{\"id\":\"tweet\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#tweet\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Tweet\"]}]}],[\"$\",\"div\",null,{\"className\":\"not-prose\",\"children\":\"$L8a\"}]]}]\n35:[\"$\",\"h2\",null,{\"id\":\"future-components\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#future-components\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"Future components\"]}]}]\n36:[\"$\",\"p\",null,{\"children\":\"There are no planned new components at the moment. I will add new ones if I need them in this joulev.dev website. In the meantime, if you want to suggest a new component, feel free to contact me, or even better, create a pull request with the new component. All contributions are welcome.\"}]\n37:[\"$\",\"h2\",null,{\"id\":\"license\",\"className\":\"scroll-mt-36\",\"children\":[\"$\",\"a\",null,{\"href\":\"#license\",\"className\":\"not-prose group relative\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute right-full not-sr-only w-4 translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-lg font-mono font-normal text-text-tertiary hover:text-text-secondary transition before:content-['#']\"}]}],\"License\"]}]}]\n38:[\"$\",\"p\",null,{\"children\":\"MIT\"}]\n"])</script>
90<script>self.__next_f.push([1,"8b:I[187247,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownCheckboxesShowcase\"]\n8c:I[187247,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"DropdownRadioGroupShowcase\"]\n8d:I[947755,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\",\"/_next/static/chunks/1a-cexoqm_umt.js\",\"/_next/static/chunks/22wjgwg1xfiaq.js\",\"/_next/static/chunks/2p1-wmiewoku9.js\",\"/_next/static/chunks/31plt5z8s7d6v.js\",\"/_next/static/chunks/04g4-k9o9pci1.js\",\"/_next/static/chunks/2t2kvq8r1t299.js\"],\"NavigationMenuMainLink\"]\n41:[\"$\",\"code\",null,{\"children\":\"style\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}]\n42:[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"code\",null,{\"children\":\"src/lib/cn.ts\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}]}],\"\\n\"]}]\n43:[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"code\",null,{\"children\":\"src/components/ui/hooks/use-hover-background.ts\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}]}],\"\\n\"]}]\n44:[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Add the \",[\"$\",\"code\",null,{\"children\":\"text-text-primary\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" class to your \",[\"$\",\"code\",null,{\"children\":\"body\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" element, or by other means ensure that \",[\"$\",\"code\",null,{\"children\":\"text-text-primary\",\"className\":\"mx-1 bg-bg-darker [box-shadow:0_0_0_4px_var(--color-bg-darker)] rounded-[4px] [font-weight:inherit] before:content-[''] after:content-[''] in-[pre]:rounded-none in-[pre]:bg-transparent in-[pre]:p-0 in-[pre]:mx-0 in-[pre]:[box-shadow:none]\"}],\" is applied to the text colour of glui components.\"]}],\"\\n\"]}]\n45:[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":\"Fix import statements in the copied files to match your project's directory structure.\"}],\"\\n\"]}]\n46:[\"$\",\"li\",null,{\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":\"Now you can start copy-pasting the components and use them in your project.\"}],\"\\n\"]}]\n5c:[\"$\",\"span\",null,{\"children\":\"More...\"}]\n5d:[\"$\",\"$L56\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\"
90:\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Plus icon\"}],[\"$\",\"path\",null,{\"d\":\"M5 12h14m-7-7v14\"}]]}],[\"$\",\"span\",null,{\"childre"])</script>
90<script>self.__next_f.push([1,"n\":\"New Team\"}],[\"$\",\"$L57\",null,{\"children\":\"âT\"}]]}]\n5e:[\"$\",\"$L54\",null,{}]\n5f:[\"$\",\"$L56\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"LogOut icon\"}],[\"$\",\"path\",null,{\"d\":\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14 5-5m0 0-5-5m5 5H9\"}]]}],[\"$\",\"span\",null,{\"children\":\"Log out\"}],[\"$\",\"$L57\",null,{\"children\":\"â§âQ\"}]]}]\n60:[\"$\",\"div\",null,{\"className\":\"grid place-items-center py-9\",\"children\":[\"$\",\"$L8b\",null,{}]}]\n61:[\"$\",\"div\",null,{\"className\":\"grid place-items-center py-9\",\"children\":[\"$\",\"$L8c\",null,{}]}]\n6d:[\"$\",\"li\",\"Scroll-area\",{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-semibold leading-none\",\"children\":\"Scroll-area\"}],[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm leading-snug text-text-secondary\",\"children\":\"Visually or semantically separates content.\"}]]}]}]\n6e:[\"$\",\"li\",\"Tabs\",{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-semibold leading-none\",\"children\":\"Tabs\"}],[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm leading-snug text-text-secondary\",\"children\":\"A set of layered sections of contentâknown as tab panelsâthat are displayed one at a time.\"}]]}]}]\n6f:[\"$\",\"li\",\"Tooltip\",{\"children\":[\"$\",\"$L6c\",null,{\"className\":\"flex select-none flex-col justify-between gap-3 leading-none no-underline outline-none\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-semibold leading-none\",\"children\":\"Tooltip\"}],[\"$\",\"p\",null,{\"className\":\"line-clamp-2 text-sm leading-snug text-text-secondary\",\"children\":\"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\"}]]}]}]\n70:[\"$\",\"$L69\",null,{\"className\":\"max-sm:hidden\",\"children\":[\"$\",\"$L8d\",null,{\"children\":\"Documentation\"}]}]\n71:[\"$\",\"div\",null,{\"className\":\"h-[582px] md:h-[320px]\"}]\n84:[\"$\",\"title\",null,{\"children\":\"List icon\"}]\n85:[\"$\",\"path\",null,{\"d\":\"M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01\"}]\n86:[\"$\",\"$L82\",null,{\"children\":\"Shopping lists\"}]\n87:[\"$\",\"$L81\",null,{\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Coffee icon\"}],[\"$\",\"path\",null,{\"d\":\"M17 8h1a4 4 0 1 1 0 8h-1m0-8H3v9a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V8ZM6 2v2m4-2v2m4-2v2\"}]]}],[\"$\",\"$L82\",null,{\"children\":\"Good coffee shops\"}]]}]\n"])</script>
90<script>self.__next_f.push([1,"3e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
90<script>self.__next_f.push([1,"8e:I[154500,[\"/_next/static/chunks/3yal63karjxdl.js\",\"/_next/static/chunks/1m5ykreap-f2c.js\",\"/_next/static/chunks/0p03d770byi7o.js\"],\"IconMark\"]\n3b:null\n"])</script>
90<script>self.__next_f.push([1,"40:[[\"$\",\"title\",\"0\",{\"children\":\"joulev.dev » glui\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A glassmorphic component collection\"}],[\"$\",\"meta\",\"2\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"joulev.dev » glui\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"A glassmorphic component collection\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:url\",\"content\":\"https://joulev.dev/glui\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image\",\"content\":\"https://joulev.dev/glui/opengraph-image-vglc78.png?opengraph-image.1l3r0v7a870hh.png\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:alt\",\"content\":\"joulev.dev » glui: A glassmorphic component collection\\n\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:title\",\"content\":\"joulev.dev » glui\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:description\",\"content\":\"A glassmorphic component collection\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image\",\"content\":\"https://joulev.dev/glui/opengraph-image-vglc78.png?opengraph-image.1l3r0v7a870hh.png\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:image:alt\",\"content\":\"joulev.dev » glui: A glassmorphic component collection\\n\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"19\",{\"rel\":\"icon\",\"href\":\"/favicon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"20\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"any\"}],[\"$\",\"$L8e\",\"21\",{}]]\n"])</script>
90<script>self.__next_f.push([1,":HL[\"https://pbs.twimg.com/profile_images/1909353910130950147/EeSGdgA5_normal.jpg\",\"image\"]\n"])</script>
90<script>self.__next_f.push([1,"8a:[\"$\",\"div\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"overflow-clip card rounded-full bg-bg-idle p-6 transition not-prose mx-auto flex max-w-lg flex-col gap-6 backdrop-blur-none\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-row gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"https://x.com/theo\",\"className\":\"shrink-0\",\"children\":[\"$\",\"img\",null,{\"src\":\"https://pbs.twimg.com/profile_images/1909353910130950147/EeSGdgA5_normal.jpg\",\"alt\":\"Theo - t3.gg\",\"width\":48,\"height\":48,\"className\":\"rounded-full\"}],\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],[\"$\",\"div\",null,{\"className\":\"flex min-w-0 grow flex-col items-start\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"https://x.com/theo\",\"className\":\"max-w-full truncate font-bold text-text-primary\",\"children\":\"Theo - t3.gg\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],[\"$\",\"div\",null,{\"className\":\"flex max-w-full flex-row items-baseline gap-1.5 text-sm text-text-secondary\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"https://x.com/theo\",\"className\":\"truncate underline-offset-4 hover:underline\",\"children\":[\"@\",\"theo\"],\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}],[\"$\",\"span\",null,{\"className\":\"cursor-default select-none max-sm:hidden\",\"children\":\"â¢\"}],[\"$\",\"$L5\",null,{\"href\":\"https://x.com/theo/status/1736177027433316701\",\"className\":\"whitespace-nowrap underline-offset-4 hover:underline max-sm:hidden\",\"children\":\"17 Dec 23\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"ml-3\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"https://x.com/theo/status/1736177027433316701\",\"className\":\"text-text-secondary transition hover:text-text-primary\",\"title\":\"It's called Twitter!\",\"children\":[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Twitter icon\"}],[\"$\",\"path\",null,{\"d\":\"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2Z\"}]]}],\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"text-sm text-text-secondary\",\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current inline-block size-4\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Reply icon\"}],[\"$\",\"path\",null,{\"d\":\"m9 17-5-5m0 0 5-5m-5 5h12a4 4 0 0 1 4 4v2\"}]]}],\" Replying to\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://x.com/theo/status/1736176754111451201\",\"className\":\"text-text-primary underline-offset-4 hover:underline\",\"children\":[\"@\",\"theo\"],\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"ref\":\"$undefined\"}]]}],[\"$\",\"div\",null,{\"className\":\"prose\",\"children\":[[\"$\",\"span\",\"0\",{\"className\":\"whitespace-pre-line\",\"dangerouslySetInnerHTML\":{\"__html\":\"I will continue to be mad about the names.\\n\\n\\\"use server\\\" should have been \\\"use action\\\" (after reading old Next PRs, I learned it used to be called this)\\n\\n\\\"use client\\\" should have been \\\"use interactive\\\" (since 90%+ of the time you want client-side JS it's for some amount of\"}}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-row flex-wrap gap-3\",\"children\":[[\"$\",\"$L18\",null,{\"href\":\"https://x.com/intent/like?tweet_id=1736177027433316701\",\"variants\":{\"size\":\"icon-sm\"}
90,\"children\":[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Heart icon\"}],[\"$\",\"path\",null,{\"d\":\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7 7-7Z\"}]]}]}],[\"$\",\"$L18\",null,{\"href\":\"https://x.com/intent/tweet?in_reply_to=1736177027433316701\",\"variants\":{\"size\":\"icon-sm\"},\"children\":[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[\"$L8f\",\"$L90\"]}]}],\"$L91\"]}]]}]}]\n"])</script>
90<script>self.__next_f.push([1,"8f:[\"$\",\"title\",null,{\"children\":\"MessageCircle icon\"}]\n90:[\"$\",\"path\",null,{\"d\":\"M7.9 20A9 9 0 1 0 4 16.1L2 22l5.9-2Z\"}]\n91:[\"$\",\"$L18\",null,{\"href\":\"https://x.com/theo/status/1736177027433316701\",\"variants\":{\"size\":\"sm\"},\"children\":[[\"$\",\"svg\",null,{\"width\":\"24\",\"height\":\"24\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"className\":\"[\u0026_path]:stroke-2 [\u0026_path]:[stroke-linecap:round] [\u0026_path]:[stroke-linejoin:round] [\u0026_path]:stroke-current\",\"children\":[[\"$\",\"title\",null,{\"children\":\"ExternalLink icon\"}],[\"$\",\"path\",null,{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6m0 0v6m0-6L10 14\"}]]}],\" Go to tweet\"]}]\n"])</script>
90<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"4930725f51f84f2fb4d96d1bc1abf88d","r":1,"spa":2}' crossorigin="anonymous"></script>
90 91</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.