PageSourceSearch

https://smoothui.dev/

html smoothui.dev collected 2026-10-03 23:02:10 UTC 275,737 bytes, 151 lines download raw bytes

1<!DOCTYPE html><html data-dpl-id="dpl_3beBMnV12dktG4VSVCH7aMMFSKYB" class="inter_3ca9ce85-module__684ZOa__className inter_3ca9ce85-module__684ZOa__variable poppins_212a496b-module__4qE9iq__variable plus_jakarta_sans_791e04b5-module__JL4tZa__variable" lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/immutable/media/47fe1b7cd6e6ed85-s.p.1n2oi-d4a-xww.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/4b766aa38fdaaae3-s.p.139ucknmlxzq9.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/829ba4228c966254-s.p.0zvxjg5nywxta.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/83afe278b6a6bb3c-s.p.45535valc9rzk.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/8e6fa89aa22d24ec-s.p.1bg6trwi21i5q.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/a218039a3287bcfd-s.p.17e3l4txdrufi.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/e2334d715941921e-s.p.2g9xiodaln20i.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/fba5a26ea33df6a3-s.p.08ssgmy_tb90r.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/vercel-oss-badge.svg"/><link rel="stylesheet" href="/_next/static/immutable/chunks/28w_e5c0532dc.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/immutable/chunks/0mirzputltyvm.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/immutable/chunks/39nzggqwre9pv.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/immutable/chunks/0hqlat9oplp2u.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/immutable/chunks/3dhnnn6j4cw5_.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/immutable/chunks/0exwcf11x5si5.js"/>
1<script src="/_next/static/immutable/chunks/2dqppm2y-m8wu.js" async=""></script>
1<script src="/_next/static/immutable/chunks/0rylfdfpi13fb.js" async=""></script>
1<script src="/_next/static/immutable/chunks/160v20pic05v6.js" async=""></script>
1<script src="/_next/static/immutable/chunks/turbopack-3qi52umjo3h2u.js" async=""></script>
1<script src="/_next/static/immutable/chunks/3a8aeu_l0zagk.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/0000g8hx493t9.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/23jhuizbf5gl1.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/3j33blug_g09f.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/27m4pu4hl0c43.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/44b5w0qxqyqq3.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/1oieo_61t706j.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/26ej0uc9vff4w.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/0t9n3c4--onxv.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/3t_j8-uf41g2-.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/0ktew84xr9d6x.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/1dg3t2gzq0_6q.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/2mnmhjw-mlmjs.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/08c0s84fiikwg.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/0nka0q8u0svqe.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/3t7nbipth8yrr.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/2ha3tn5_zb4v1.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/40q443tuofvly.js" async="" crossorigin=""></script>
1<title>SmoothUI - Animated React Components for shadcn/ui | Motion &amp; Tailwind</title><meta name="description" content="Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible, fully customizable with Tailwind CSS."/><link rel="manifest" href="/manifest.json"/><meta name="keywords" content="react components,tailwindcss ui,motion animations,framer motion,shadcn/ui,shadcn ui components,react ui library,customizable components,animated ui components,dark mode components,shadcn alternative"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://smoothui.dev"/><meta property="og:title" content="SmoothUI - Animated React Components for shadcn/ui"/><meta property="og:description" content="Beautiful animated React components with smooth Motion animations. Drop-in shadcn/ui compatible, fully customizable. 198 free components for modern UIs."/><meta property="og:url" content="https://smoothui.dev"/><meta property="og:site_name" content="SmoothUI"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://smoothui.dev/og-optimized.webp"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="SmoothUI Cover"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@educalvolpz"/><meta name="twitter:creator" content="@educalvolpz"/><meta name="twitter:title" content="SmoothUI - Animated React Components for shadcn/ui"/><meta name="twitter:description" content="Beautiful animated React components with smooth Motion animations. Drop-in shadcn/ui compatible, fully customizable. 198 free components for modern UIs."/><meta name="twitter:image" content="https://smoothui.dev/og-optimized.webp"/><meta name="twitter:image:alt" content="SmoothUI Cover"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" href="/favicon.ico?favicon.4450i9muj9qym.ico" sizes="48x48" type="image/x-icon"/><meta name="next-size-adjust" content=""/><meta content="SmoothUI" name="apple-mobile-web-app-title"/><link href="/blog/rss.xml" rel="alternate" title="SmoothUI Blog" type="application/rss+xml"/><link href="/llms.txt" rel="alternate" type="text/plain"/><link href="/llms-full.txt" rel="alternate" type="text/plain"/>
1<script id="smoothui-schema" type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@id":"https://smoothui.dev/#organization","@type":"Organization","description":"Beautiful animated React components with smooth Motion and GSAP animations. Drop-in shadcn/ui compatible, fully customizable. 198 free components with Tailwind CSS for modern UIs.","founder":{"@type":"Person","name":"Eduardo Calvo","sameAs":["https://twitter.com/educalvolpz"]},"logo":{"@type":"ImageObject","url":"https://smoothui.dev/logo-smoothui.svg"},"name":"SmoothUI","sameAs":["https://twitter.com/educalvolpz","https://github.com/educlopez/smoothui"],"url":"https://smoothui.dev"},{"@id":"https://smoothui.dev/#software","@type":"SoftwareApplication","applicationCategory":"DeveloperApplication","author":{"@id":"https://smoothui.dev/#organization"},"description":"A React component library featuring 198 animated UI components with smooth Motion and GSAP animations. Compatible with shadcn/ui, built with Tailwind CSS v4 and TypeScript.","keywords":["react components","tailwindcss ui","motion animations","framer motion","gsap animations","shadcn/ui","shadcn ui components","shadcn alternative","react ui library","animated ui components","dark mode components"],"name":"SmoothUI","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"operatingSystem":"Any","programmingLanguage":["TypeScript","JavaScript"],"runtimePlatform":"React","url":"https://smoothui.dev"},{"@id":"https://smoothui.dev/#website","@type":"WebSite","name":"SmoothUI","potentialAction":{"@type":"SearchAction","query-input":"required name=search_term","target":{"@type":"EntryPoint","urlTemplate":"https://smoothui.dev/docs/components?q={search_term}"}},"publisher":{"@id":"https://smoothui.dev/#organization"},"url":"https://smoothui.dev"}]}</script>
1<script src="/_next/static/immutable/chunks/0c0hxoamwjsbw.js" noModule=""></script>
1</head><body class="flex min-h-screen flex-col"><div hidden=""><!--$--><!--/$--></div><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$-->
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
1<!--$--><div class="bg-fd-secondary/50 p-3 empty:hidden"></div><!--/$--><div class="relative isolate bg-background transition"><main class="relative min-h-screen w-full overflow-y-auto"><div aria-hidden="true" class="blurMagic-module__nGfQBW__root left-1/2! z-20 h-[120px]! w-full! max-w-[inherit]! -translate-x-1/2!" data-side="top" style="--background:var(--color-background);--blur:4px;--stop:50%"></div><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="navbar-menu mx-auto max-w-7xl"><div class="flex flex-1 items-center gap-2"><a href="/"><span class="flex cursor-pointer items-center gap-2 border-none bg-transparent"><svg aria-hidden="true" class="h-6 w-auto cursor-grabbing" data-expression="neutral" fill="none" height="597" viewBox="0 0 443 597" width="443" xmlns="http://www.w3.org/2000/svg" style="display:block;transform-origin:50% 88%"><path class="fill-foreground" d="M209.511 81.9998C100.987 81.9998 13.0107 169.976 13.0107 278.5H406.011C406.011 169.976 318.035 81.9998 209.511 81.9998Z" fill="#FF64B1"></path><path class="fill-foreground" d="M31.0107 279.07C37.7797 279.924 88.001 279.07 88.001 279.07L211.001 279.07C211.001 279.07 281.395 279.102 326.501 279.07C351.033 279.052 340.501 279 389.319 279C388.843 284.983 387.765 291.019 386.954 296.974L382.314 331.242L369.406 431.749C366.068 458.502 363.366 485.334 359.909 512.07C358.404 523.711 357.483 536.169 354.621 547.539C353.444 550.459 352.034 553.106 350.13 555.612C331.041 580.737 284.184 588.95 254.396 593.075C239.067 595.309 223.592 596.385 208.102 596.296C173.519 595.829 109.775 586.855 81.9698 565.58C75.7968 560.856 70.0768 555.028 67.6848 547.463C65.4648 540.44 65.0338 532.242 64.0218 524.955L57.9317 481.252L31.0107 279.07Z" fill="#FF64B1"></path><path class="stroke-background" d="M150 432 Q221.5 494 293 432" fill="none" stroke-linecap="round" stroke-width="30" style="transform:none;transform-origin:50% 50%;transform-box:fill-box"></path><rect class="fill-foreground" fill="#FF64B1" height="76" rx="10" width="420" y="251"></rect><path class="fill-foreground" d="M335.493 11.8972C335.898 12.0719 336.283 12.2729 336.652 12.4924L433.04 54.1314C438.11 56.3216 440.444 62.2072 438.254 67.2772L430.322 85.6372C428.132 90.707 422.247 93.0417 417.177 90.8515L328.776 52.6628L290.686 140.835C288.496 145.905 282.61 148.24 277.54 146.049L259.18 138.118C254.11 135.928 251.776 130.042 253.966 124.972L303.987 9.18003C306.178 4.11004 312.063 1.77552 317.133 3.96573L335.493 11.8972Z" fill="#FF64B1"></path><g style="transform:none;transform-origin:50% 50%;transform-box:fill-box"><rect class="fill-background" height="157" rx="18" width="50" x="118" y="222"></rect><rect class="fill-background" height="157" rx="18" width="50" x="252" y="222"></rect></g></svg><span class="mt-0.5 select-none text-center font-medium font-title text-foreground text-xl transition">Smooth<span class="text-brand">UI</span></span></span></a></div><div style="position:relative"><ul data-orientation="horizontal" class="menu-list flex-auto" dir="ltr"><li><button id="radix-_R_19fl5b_-trigger-radix-_R_2l9fl5b_" data-state="closed" aria-expanded="false" aria-controls="radix-_R_19fl5b_-content-radix-_R_2l9fl5b_" class="trigger !cursor-default" data-radix-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="m22.346,4.836l-3.182-3.182c-.779-.78-2.049-.78-2.828,0l-3.182,3.182c-.78.78-.78,2.048,0,2.828l3.182,3.182c.39.39.902.585,1.414.585s1.024-.195,1.414-.585l3.182-3.182c.78-.78.78-2.048,0-2.828Z" fill="currentColor" stroke-width="0" data-color="color-2"></path><rect x="2" y="2" width="9" height="9" rx="2" ry="2" stroke-width="0" fill="currentColor"></rect><rect x="13" y="13" width="9" height="9" rx="2" ry="2" stroke-width="0" fill="currentColor"></rect><rect x="2" y="13" width="9" height="9" rx="2" ry="2" stroke-width="0" fill="currentColor"></rect></svg>Components</button></li><li><button id="radix-_R_19fl5b_-trigger-radix-_R_4l9fl5b_" data-state="closed" aria-expanded="false" aria-controls="radix-_R_19fl5b_-content-radix-_R_4l9fl5b_" class="trigger !cursor-default" data-radix-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
1ox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.8234 0.0866699L14.1452 9.04525H22.206L9.1766 23.9133L9.85477 14.9548H1.79402L14.8234 0.0866699Z" fill="currentColor"></path></svg>Blocks</button></li><li><a class="trigger" href="/docs/templates" data-radix-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M23 6C23 4.34315 21.6569 3 20 3H4C2.34315 3 1 4.34315 1 6V18C1 19.6569 2.34314 21 4 21H20C21.6569 21 23 19.6569 23 18V6ZM3 9L3 18C3 18.5523 3.44771 19 4 19H20C20.5523 19 21 18.5523 21 18V9H3Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.08576 16.4998L8.5858 13.9998L6.08578 11.4998L7.49998 10.0856L11.4143 13.9998L7.49995 17.914L6.08576 16.4998Z" fill="currentColor" data-color="color-2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M13 15H18V17H13V15Z" fill="currentColor" data-color="color-2"></path></svg> Templates</a></li><li><a class="trigger" href="/playground" data-radix-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 22C9.20914 22 11 20.2091 11 18L11 3.5C11 2.67157 10.3284 2 9.5 2H4.5C3.67157 2 3 2.67157 3 3.5V18C3 20.2091 4.79086 22 7 22ZM5.5 18C5.5 17.1716 6.17157 16.5 7 16.5C7.82843 16.5 8.5 17.1716 8.5 18C8.5 18.8284 7.82843 19.5 7 19.5C6.17157 19.5 5.5 18.8284 5.5 18ZM5 5V7H9V5H5Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M18.4979 13L12.9777 18.5201C12.9006 19.4178 12.6259 20.259 12.1973 21L20.5 21C21.3284 21 22 20.3284 22 19.5V14.5C22 13.6716 21.3284 13 20.5 13H18.4979ZM20 15H18V19H20V15Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.024 8.64551L13 15.6695V4.35578L14.3671 2.98866C14.9529 2.40287 15.9027 2.40287 16.4884 2.98866L20.024 6.52419C20.6098 7.10998 20.6098 8.05972 20.024 8.64551ZM14.7929 5.37868L13.3787 6.79289L16.2071 9.62132L17.6213 8.20711L14.7929 5.37868Z" fill="currentColor" data-color="color-2"></path></svg> Playground</a></li><li><button id="radix-_R_19fl5b_-trigger-radix-_R_al9fl5b_" data-state="closed" aria-expanded="false" aria-controls="radix-_R_19fl5b_-content-radix-_R_al9fl5b_" class="trigger !cursor-default" data-radix-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.3338 15.3338L17.3341 6.66577L8.66608 8.66608L6.66577 17.3341L15.3338 15.3338ZM12.9999 11.9999C12.9999 12.5522 12.5522 12.9999 11.9999 12.9999C11.4477 12.9999 10.9999 12.5522 10.9999 11.9999C10.9999 11.4477 11.4477 10.9999 11.9999 10.9999C12.5522 10.9999 12.9999 11.4477 12.9999 11.9999Z" fill="currentColor" data-color="color-2"></path></svg>Resources</button></li></ul></div><div class="viewport-position"></div><div class="flex flex-1 items-center justify-end gap-2"><a class="flex items-center gap-2 font-medium text-sm transition-colors hover:text-brand" rel="noopener noreferrer" target="_blank" href="https://github.com/educlopez/smoothui"><svg class="size-3.5" fill="currentColor" viewBox="0 0 24 24"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="truncate">educlopez/smoothui</span></a></div></nav><section class="flex flex-col overflow-hidden"><div class="w-full bg-background"><div class="mx-auto w-full max-w-7xl [&amp;&gt;section]:bg-transparent"><section class="bg-background transition"><div class="relative py-24 md:py-36"><div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><div class="mx-auto max-w-7xl px-8"><div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2"><div class="flex max-w-xl flex-col" style="opacity:0;transform:translateY(20px)"><div class="flex flex-col gap-5"><h1 class="text-balance font-semibold font-title text-4xl text-foreground tracking-tight md:text-5xl lg:text-6xl lg:leading-[1.1]"><span class="block">React components.</span><span class="block text-muted-foreground">Made to move.</span></h1>
1<p class="max-w-lg text-balance text-foreground/70 text-lg leading-relaxed md:text-xl">198<!-- --> animated components to make every interaction feel considered. Copy the code, make it yours. Built for React and shadcn/ui.</p></div><div class="mt-10 flex flex-col gap-5"><div class="flex flex-col gap-3 sm:flex-row sm:gap-4"><a class="relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 h-9 gap-1.5 rounded-md px-3 text-sm [&amp;_svg]:size-4 border-[0.5px] border-white/25 bg-gradient-to-b from-[var(--btn,var(--color-brand))] to-[var(--btn-hover,var(--color-brand-secondary))] text-[var(--btn-fg,#fff)] text-shadow-sm shadow-black/20 shadow-md ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--btn,var(--color-brand)))] hover:from-[var(--btn-hover,var(--color-brand-secondary))] hover:to-[var(--btn-hover,var(--color-brand-secondary))] [&amp;_svg]:drop-shadow-sm" href="/docs/components">Browse components</a><a class="relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 h-9 gap-1.5 rounded-md px-3 text-sm [&amp;_svg]:size-4 border border-transparent bg-background text-[var(--btn,var(--color-foreground))] shadow-black/15 shadow-sm ring-1 ring-foreground/10 hover:bg-primary dark:ring-foreground/15" href="/docs/guides">Read the docs</a></div><button aria-label="Copy install command" class="group flex w-fit max-w-full cursor-pointer items-center gap-2.5 rounded-lg border border-border bg-background px-3 py-2 font-mono text-foreground/80 text-sm transition-colors hover:border-brand/40" type="button"><span aria-hidden="true" class="select-none text-muted-foreground">$</span><span class="truncate">npx shadcn@latest add @smoothui/dynamic-island</span><span class="shrink-0 text-muted-foreground transition-colors group-hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="size-4"><path d="M10.5 7C9.11929 7 8 8.11929 8 9.5V20.5C8 21.8807 9.11929 23 10.5 23H19.5C20.8807 23 22 21.8807 22 20.5V9.5C22 8.11929 20.8807 7 19.5 7H10.5Z" fill="currentColor"></path><path d="M2 3.5C2 2.11929 3.11929 1 4.5 1H13.5C14.8807 1 16 2.11929 16 3.5V5H10.5C8.01472 5 6 7.01472 6 9.5V17H4.5C3.11929 17 2 15.8807 2 14.5V3.5Z" fill="currentColor" data-color="color-2"></path></svg></span><span aria-live="polite" class="sr-only"></span></button></div><div class="mt-12 flex flex-col gap-5 border-border/60 border-t pt-8"><a class="w-fit opacity-80 transition-opacity hover:opacity-100" href="https://vercel.com/oss" rel="noopener noreferrer" target="_blank"><img alt="Vercel Open Source Software Program" draggable="false" height="24" src="/vercel-oss-badge.svg" width="240"/></a><div class="flex flex-wrap items-center gap-x-6 gap-y-3"><span class="cursor-default text-smooth-700 transition-colors hover:text-brand" data-state="closed" data-slot="tooltip-trigger"><svg aria-hidden="true" class="size-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.001 13.5001C11.1725 13.5001 10.501 12.8285 10.501 12.0001C10.501 11.1716 11.1725 10.5001 12.001 10.5001C12.8294 10.5001 13.501 11.1716 13.501 12.0001C13.501 12.8285 12.8294 13.5001 12.001 13.5001ZM11.4733 16.4945C11.6479 16.705 11.8239 16.908 12.001 17.103C12.178 16.908 12.3541 16.705 12.5286 16.4945C12.3538 16.4982 12.1779 16.5001 12.001 16.5001C11.824 16.5001 11.6481 16.4982 11.4733 16.4945ZM9.47837 16.3694C8.6762 16.2846 7.91035 16.1603 7.19268 16.0016C7.11832 16.3512 7.06134 16.6904 7.02243 17.0166C6.83358 18.6 7.09805 19.5617 7.50098 19.7943C7.9039 20.0269 8.86893 19.7751 10.1458 18.8199C10.4088 18.6231 10.6741 18.4042 10.9397 18.1649C10.4434 17.6228 9.95287 17.0217 9.47837 16.3694ZM16.8093 16.0016C16.0916 16.
11603 15.3257 16.2846 14.5236 16.3694C14.0491 17.0217 13.5585 17.6228 13.0622 18.1649C13.3279 18.4042 13.5931 18.6231 13.8562 18.8199C15.133 19.7751 16.0981 20.0269 16.501 19.7943C16.9039 19.5617 17.1684 18.6 16.9795 17.0166C16.9406 16.6904 16.8836 16.3512 16.8093 16.0016ZM18.2598 15.6136C18.8364 18.2526 18.5328 20.3533 17.251 21.0933C15.9691 21.8334 13.9981 21.046 12.001 19.2271C10.0038 21.046 8.03282 21.8334 6.75098 21.0933C5.46913 20.3533 5.16555 18.2526 5.74217 15.6136C3.16842 14.7935 1.50098 13.4802 1.50098 12.0001C1.50098 10.5199 3.16842 9.20668 5.74217 8.38654C5.16555 5.74754 5.46913 3.64687 6.75098 2.9068C8.03282 2.16673 10.0038 2.95415 12.001 4.77302C13.9981 2.95415 15.9691 2.16673 17.251 2.9068C18.5328 3.64687 18.8364 5.74754 18.2598 8.38654C20.8335 9.20668 22.501 10.5199 22.501 12.0001C22.501 13.4802 20.8335 14.7935 18.2598 15.6136ZM10.9397 5.83521C10.6741 5.59597 10.4088 5.37703 10.1458 5.18024C8.86893 4.22499 7.9039 3.97321 7.50098 4.20584C7.09805 4.43847 6.83358 5.4001 7.02243 6.9835C7.06134 7.30969 7.11832 7.6489 7.19268 7.99857C7.91035 7.83985 8.6762 7.71556 9.47837 7.63078C9.95287 6.97848 10.4434 6.37737 10.9397 5.83521ZM14.5236 7.63078C15.3257 7.71556 16.0916 7.83985 16.8093 7.99857C16.8836 7.6489 16.9406 7.30969 16.9795 6.9835C17.1684 5.4001 16.9039 4.43847 16.501 4.20584C16.0981 3.97321 15.133 4.22499 13.8562 5.18024C13.5931 5.37703 13.3279 5.59597 13.0622 5.83521C13.5585 6.37737 14.0491 6.97848 14.5236 7.63078ZM12.5286 7.50565C12.3541 7.2951
15 12.178 7.09211 12.001 6.89711C11.8239 7.09211 11.6479 7.29515 11.4733 7.50565C11.6481 7.50194 11.824 7.50007 12.001 7.50007C12.1779 7.50007 12.3538 7.50194 12.5286 7.50565ZM8.37252 14.7042C8.28191 14.5547 8.19233 14.4033 8.10386 14.2501C8.01539 14.0968 7.92906 13.9435 7.84488 13.7903C7.74985 14.0467 7.66205 14.3007 7.58169 14.5515C7.83908 14.6074 8.10295 14.6583 8.37252 14.7042ZM10.3049 14.9377C10.8579 14.9788 11.4251 15.0001 12.001 15.0001C12.5769 15.0001 13.144 14.9788 13.697 14.9377C14.0091 14.4793 14.3111 13.9988 14.5991 13.5001C14.887 13.0013 15.1522 12.4995 15.393 12.0001C15.1522 11.5006 14.887 10.9988 14.5991 10.5001C14.3111 10.0013 14.0091 9.52081 13.697 9.06246C13.144 9.02133 12.5769 9.00007 12.001 9.00007C11.4251 9.00007 10.8579 9.02133 10.3049 9.06246C9.99283 9.52081 9.69086 10.0013 9.4029 10.5001C9.11494 10.9988 8.8498 11.5006 8.60892 12.0001C8.8498 12.4995 9.11494 13.0013 9.4029 13.5001C9.69086 13.9988 9.99283 14.4793 10.3049 14.9377ZM16.1571 10.2098C16.2521 9.9534 16.3399 9.6994 16.4203 9.44859C16.1629 9.39278 15.899 9.34182 15.6294 9.29591C15.72 9.44543 15.8096 9.59683 15.8981 9.75007C15.9866 9.9033 16.0729 10.0566 16.1571 10.2098ZM6.13143 9.83671C5.79142 9.94714 5.46917 10.0674 5.16723 10.1968C3.70154 10.825 3.00098 11.5348 3.00098 12.0001C3.00098 12.4653 3.70154 13.1752 5.16723 13.8033C5.46917 13.9327 5.79142 14.053 6.13143 14.1634C6.35281 13.4625 6.6281 12.7371 6.95576 12.0001C6.6281 11.263 6.35281 10.5376 6.13143 9.83671ZM7.58169 9.44859C7.66205 9.6994 7.74985 9.9534 7.84488 10.2098C7.92906 10.0566 8.01539 9.9033 8.10386 9.75007C8.19233 9.59683 8.28191 9.44543 8.37252 9.29591C8.10295 9.34182 7.83908 9.39278 7.58169 9.44859ZM17.8705 14.1634C18.2105 14.053 18.5328 13.9327 18.8347 13.8033C20.3004 13.1752 21.001 12.4653 21.001 12.0001C21.001 11.5348 20.3004 10.825 18.8347 10.1968C18.5328 10.0674 18.2105 9.94714 17.8705 9.83671C17.6491 10.5376 17.3739 11.263 17.0462 12.0001C17.3739 12.7371 17.6491 13.4625 17.8705 14.1634ZM16.4203 14.5515C16.3399 14.3007 16.2521 14.0467 16.1571 13.7903C16.0729 13.9435 15.9866 14.0968 15.8981 14.2501C15.8096 14.4033 15.72 14.5547 15.6294 14.7042C15.899 14.6583 16.1629 14.6074 16.4203 14.5515Z" fill="currentColor"></path></svg></span><span class="cursor-default text-smooth-700 transition-colors hover:text-brand" data-state="closed" data-slot="tooltip-trigger"><svg aria-hidden="true" class="h-5 w-auto" fill="currentColor" viewBox="0 0 133 80"><path d="M66.5 0C48.7668 0 37.6832 8.86684 33.25 26.6C39.9 17.7332 47.6582 14.4082 56.525 16.625C61.5837 17.8895 65.1996 21.56 69.2021 25.6222C75.7222 32.2406 83.2679 39.9 99.75 39.9C117.483 39.9 128.567 31.0332 133 13.3C126.35 22.1668 118.592 25.4918 109.725 23.275C104.666 22.0105 101.05 18.34 97.0479 14.2778C90.5278 7.65945 82.9821 0 66.5 0ZM33.25 39.9C15.5168 39.9 4.43316 48.7668 0 66.5C6.65 57.6332 14.4082 54.3082 23.275 56.525C28.3337 57.7895 31.9496 61.46 35.9521 65.5222C42.4722 72.1405 50.0179 79.8 66.5 79.8C84.2332 79.8 95.3168 70.9332 99.75 53.2C93.1 62.0668 85.3418 65.3918 76.475 63.175C71.4163 61.9105 67.8004 58.24 63.7979 54.1778C57.2778 47.5594 49.7321 39.9 33.25 39.9Z"></path></svg></span><span class="cursor-default text-smooth-700 transition-colors hover:text-brand" data-state="closed" data-slot="tooltip-trigger"><svg fill="currentColor" height="1em" viewBox="0 0 256 256" width="1em" xmlns="http://www.w3.org/2000/svg" class="size-6"><title>shadcn/ui logo</title><path d="M0 0h256v256H0z" fill="none"></path><path d="M208 128l-80 80M192
240L40 192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="25"></path></svg></span><span class="cursor-default text-smooth-700 transition-colors hover:text-brand" data-state="closed" data-slot="tooltip-trigger"><svg aria-hidden="true" class="h-4 w-auto" fill="currentColor" viewBox="0 0 1103 386"><path d="M416.473 0 198.54 385.66H0L170.17 84.522C196.549 37.842 262.377 0 317.203 0Zm486.875 96.415c0-53.249 44.444-96.415 99.27-96.415 54.826 0 99.27 43.166 99.27 96.415 0 53.248-44.444 96.415-99.27 96.415-54.826 0-99.27-43.167-99.27-96.415ZM453.699 0h198.54L434.306 385.66h-198.54Zm234.492 0h198.542L716.56 301.138c-26.378 46.68-92.207 84.522-147.032 84.522h-99.27Z"></path></svg></span><span class="cursor-default text-smooth-700 transition-colors hover:text-brand" data-state="closed" data-slot="tooltip-trigger"><svg aria-hidden="true" class="h-4 w-auto" fill="currentColor" viewBox="0 0 82 30" xmlns="http://www.w3.org/2000/svg"><path d="M23.81 14.013v.013l-1.075 4.665c-.058.264-.322.458-.626.458H20.81a.218.218 0 0 0-.208.155c-1.198 4.064-2.82 6.858-4.962 8.535-1.822 1.428-4.068 2.093-7.069 2.093-2.696 0-4.514-.867-6.056-2.578C.478 25.09-.364 21.388.146 16.926 1.065 8.549 5.41.096 13.776.096c2.545-.023 4.543.762 5.933 2.33 1.47 1.657 2.216 4.154 2.22 7.421a.55.55 0 0 1-.549.536h-6.13a.42.42 0 0 1-.407-.41c-.05-2.259-.72-3.36-2.052-3.36-2.35 0-3.736 3.19-4.471 4.959-1.027 2.47-1.55 5.152-1.447 7.824.049 1.244.249 2.994 1.43 3.718 1.047.643 2.541.217 3.446-.495.904-.711 1.632-1.942 1.938-3.065.043-.156.046-.277.005-.332-.043-.055-.162-.068-.253-.068h-1.574a.572.572 0 0 1-.438-.202.42.42 0 0 1-.087-.362l1.076-4.674c.053-.24.27-.42.537-.453v-.011h10.33c.024 0 .049 0 .072.005.268.034.457.284.452.556h.002Z"></path><path d="M41.594 8.65a.548.548 0 0 1-.548.531H35.4c-.37 0-.679-.3-.679-.665 0-1.648-.57-2.45-1.736-2.45s-1.918.717-1.94 1.968c-.025 1.395.764 2.662 3.01 4.84 2.957 2.774 4.142 5.232 4.085 8.48C38.047 26.605 34.476 30 29.042 30c-2.775 0-4.895-.743-6.305-2.207-1.431-1.486-2.087-3.668-1.95-6.485a.548.548 0 0 1 .549-.53h5.84a.55.55 0 0 1 .422.209.48.48 0 0 1 .106.384c-.065 1.016.112 1.775.512 2.195.256.272.613.41 1.058.41 1.079 0 1.711-.763 1.735-2.09.02-1.148-.343-2.155-2.321-4.19-2.555-2.496-4.846-5.075-4.775-9.13.042-2.351.976-4.502 2.631-6.056C28.294.868 30.687 0 33.465 0c2.783.02 4.892.813 6.269 2.359 1.304 1.466 1.932 3.582 1.862 6.29h-.002Z"></path><path d="m59.096 29.012.037-27.932a.525.525 0 0 0-.529-.533h-8.738c-.294 0-.423.252-.507.42L36.707 28.842v.005l-.005.006c-.14.343.126.71.497.71h6.108c.33 0 .548-.1.656-.308l1.213-2.915c.149-.388.177-.424.601-.424h
25.836c.406 0 .415.008.408.405l-.131 2.71a.525.525 0 0 0 .529.532h6.17a.522.522 0 0 0 .403-.182.458.458 0 0 0 .104-.369Zm-10.81-9.326c-.057 0-.102-.001-.138-.005a.146.146 0 0 1-.13-.183c.012-.041.029-.095.053-.163l4.377-10.827c.038-.107.086-.212.136-.314.071-.145.157-.155.184-.047.023.09-.502 11.118-.502 11.118-.041.413-.06.43-.467.464l-3.509-.041h-.008l.003-.002Z"></path><path d="M71.545.547h-4.639c-.245 0-.52.13-.585.422l-6.455 28.029a.423.423 0 0 0 .088.364.572.572 0 0 0 .437.202h5.798c.311 0 .525-.153.583-.418 0 0 .703-3.168.704-3.178.05-.247-.036-.439-.258-.555-.105-.054-.209-.108-.312-.163l-1.005-.522-1-.522-.387-.201a.186.186 0 0 1-.102-.17.199.199 0 0 1 .198-.194l3.178.014c.95.005 1.901-.062 2.836-.234 6.58-1.215 10.95-6.485 11.076-13.656.107-6.12-3.309-9.221-10.15-9.221l-.005.003Zm-1.579 16.68h-.124c-.278 0-.328-.03-.337-.04-.004-.007 1.833-8.073 1.834-8.084.047-.233.045-.367-.099-.446-.184-.102-2.866-1.516-2.866-1.516a.188.188 0 0 1-.101-.172.197.197 0 0 1 .197-.192h4.241c1.32.04 2.056 1.221 2.021 3.237-.061 3.492-1.721 7.09-4.766 7.214Z"></path></svg></span></div></div></div><div class="relative" style="opacity:0;transform:translateX(20px)"><div aria-label="Interactive material preview" class="relative isolate w-full rounded-[2rem] border border-border/70 bg-muted/40 p-3 shadow-[inset_0_1px_0_#ffffff80] sm:p-5" data-hero-material="true" role="group"><div class="relative flex aspect-square items-center justify-center overflow-hidden rounded-[1.5rem] border border-border/50 bg-background/65 shadow-[inset_0_2px_12px_#00000004]"><div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_75%,var(--color-muted),transparent_65%)]"></div><div aria-hidden="true" class="pointer-events-none absolute bottom-[12%] h-5 w-2/5 rounded-[50%] bg-foreground
2/10 blur-xl"></div><div class="hero-material-orb relative aspect-square w-[78%] max-w-90" data-paused="true"><div class="relative !size-full" style="--orb-size:320px;height:320px;width:320px"><div class="absolute rounded-full" style="background:radial-gradient(circle at 50% 50%, #858197 0%, transparent 64%);filter:blur(calc(var(--orb-size) * 0.28));inset:-12%"></div><div class="siri-orb" style="--animation-duration:11.666666666666668s;--bg:#f2f3f5;--c1:#596374;--c2:#858197;--c3:#f2f3f5;--c4:#596374;--contrast-amount:2.56;--dot-size:2.56px;--drift-duration:7.0588235294117645s;--mask-radius:25%;--rim:19.2px;--shadow-spread:2.56px;filter:saturate(1) hue-rotate(18deg);height:100%;width:100%;--blur-amount:4.8px;transform:none"><span aria-hidden="true" class="siri-orb-layer siri-orb-sheen"></span><span aria-hidden="true" class="siri-orb-layer siri-orb-rim"></span><style>
3        @property --angle {
4          syntax: "<angle>";
5          inherits: false;
6          initial-value: 0deg;
7        }
8
9        .siri-orb {
10          display: grid;
11          grid-template-areas: "stack";
12          overflow: hidden;
13          border-radius: 50%;
14          position: relative;
15          isolation: isolate;
16        }
17
18        .siri-orb::before,
19        .siri-orb::after,
20        .siri-orb > .siri-orb-layer {
21          content: "";
22          display: block;
23          grid-area: stack;
24          width: 100%;
25          height: 100%;
26          border-radius: 50%;
27        }
28
29        /* Glassy highlight that drifts, so the sheen never sits still enough to
30           read as a printed-on gradient. */
31        .siri-orb-sheen {
32          background:
33            radial-gradient(circle at 30% 24%, hsl(0 0% 100% / 0.32), transparent 34%),
34            radial-gradient(circle at 72% 80%, hsl(0 0% 100% / 0.07), transparent 48%);
35          mix-blend-mode: screen;
36          animation: siri-drift var(--drift-duration) ease-in-out infinite alternate;
37        }
38
39        /* Lit top edge, shaded bottom, thin inner ring. */
40        .siri-orb-rim {
41          box-shadow:
42            inset 0 0 0 1px hsl(0 0% 100% / 0.16),
43            inset 0 calc(var(--rim) * 1) calc(var(--rim) * 2) hsl(0 0% 100% / 0.22),
44            inset 0 calc(var(--rim) * -1.2) calc(var(--rim) * 2.4) hsl(0 0% 0% / 0.4);
45          pointer-events: none;
46        }
47
48        @keyframes siri-drift {
49          0% { transform: translate(-6%, -4%) scale(1.05); }
50          100% { transform: translate(7%, 6%) scale(1.12); }
51        }
52
53        .siri-orb::before {
54          background:
55            conic-gradient(
56              from calc(var(--angle) * 2) at 25% 70%,
57              var(--c3),
58              transparent 20% 80%,
59              var(--c3)
60            ),
61            conic-gradient(
62              from calc(var(--angle) * 2) at 45% 75%,
63              var(--c2),
64              transparent 30% 60%,
65              var(--c2)
66            ),
67            conic-gradient(
68              from calc(var(--angle) * -3) at 80% 20%,
69              var(--c1),
70              transparent 40% 60%,
71              var(--c1)
72            ),
73            conic-gradient(
74              from calc(var(--angle) * 1.5) at 60% 35%,
75              var(--c4),
76              transparent 25% 75%,
77              var(--c4)
78            ),
79            conic-gradient(
80              from calc(var(--angle) * 2) at 15% 5%,
81              var(--c2),
82              transparent 10% 90%,
83              var(--c2)
84            ),
85            conic-gradient(
86              from calc(var(--angle) * 1) at 20% 80%,
87              var(--c1),
88              transparent 10% 90%,
89              var(--c1)
90            ),
91            conic-gradient(
92              from calc(var(--angle) * -2) at 85% 10%,
93              var(--c3),
94              transparent 20% 80%,
95              var(--c3)
96            );
97          box-shadow: inset var(--bg) 0 0 var(--shadow-spread)
98            calc(var(--shadow-spread) * 0.2);
99          /* The saturate() pass is what keeps the colour alive after the blur
100             and the overlaid dot pattern have both eaten into it. */
101          filter: blur(var(--blur-amount)) contrast(var(--contrast-amount))
102            saturate(1.4);
103          animation: rotate var(--animation-duration) linear infinite;
104        }
105
106        .siri-orb::after {
107          background-image: radial-gradient(
108            circle at center,
109            var(--bg) var(--dot-size),
110            transparent var(--dot-size)
111          );
112          background-size: calc(var(--dot-size) * 2) calc(var(--dot-size) * 2);
113          backdrop-filter: blur(calc(var(--blur-amount) * 2))
114            contrast(calc(var(--contrast-amount) * 2));
115          mix-blend-mode: overlay;
116        }
117
118        /* Apply mask only when radius is greater than 0 */
119        .siri-orb[style*="--mask-radius: 0%"]::after {
120          mask-image: none;
121        }
122
123        .siri-orb:not([style*="--mask-radius: 0%"])::after {
124          mask-image: radial-gradient(
125            black var(--mask-radius),
126            transparent 75%
127          );
128        }
129
130        @keyframes rotate {
131          to {
132            --angle: 360deg;
133          }
134        }
135
136        @media (prefers-reduced-motion: reduce) {
137          .siri-orb::before,
138          .siri-orb-sheen {
139            animation: none;
140          }
141        }
142      </style></div></div></div></div><div class="relative mx-auto -mt-6 flex w-full max-w-full flex-wrap items-center justify-center gap-3 rounded-2xl border border-border/80 bg-card p-2 shadow-[0_6px_20px_#0000000a,inset_0_1px_0_#ffffff80] sm:w-fit sm:gap-3 sm:px-3"><div aria-label="Material palette" class="flex" role="group"><button aria-label="Pearl" aria-pressed="true" class="group relative flex size-10 items-center justify-center rounded-xl focus-visible:outline-2 focus-visible:outline-ring" type="button">
142<span class="size-6 rounded-full border border-foreground/10 shadow-[inset_0_1px_2px_#ffffffaa,0_2px_3px_#00000010] transition-transform motion-safe:group-hover:scale-110 motion-reduce:transition-none" style="background:linear-gradient(135deg, #596374, #f2f3f5, #858197)"></span><span aria-hidden="true" class="absolute bottom-0.5 size-1 rounded-full bg-brand"></span></button><button aria-label="Rose" aria-pressed="false" class="group relative flex size-10 items-center justify-center rounded-xl focus-visible:outline-2 focus-visible:outline-ring" type="button"><span class="size-6 rounded-full border border-foreground/10 shadow-[inset_0_1px_2px_#ffffffaa,0_2px_3px_#00000010] transition-transform motion-safe:group-hover:scale-110 motion-reduce:transition-none" style="background:linear-gradient(135deg, #bf397e, #f7e9f3, #775786)"></span></button><button aria-label="Glacier" aria-pressed="false" class="group relative flex size-10 items-center justify-center rounded-xl focus-visible:outline-2 focus-visible:outline-ring" type="button">
142<span class="size-6 rounded-full border border-foreground/10 shadow-[inset_0_1px_2px_#ffffffaa,0_2px_3px_#00000010] transition-transform motion-safe:group-hover:scale-110 motion-reduce:transition-none" style="background:linear-gradient(135deg, #34797e, #e5f0f1, #647ea9)"></span></button></div><button aria-label="Pause material animation" aria-pressed="false" class="flex size-10 shrink-0 items-center justify-center rounded-xl text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring sm:order-last" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pause size-4" aria-hidden="true"><rect x="14" y="3" width="5" height="18" rx="1"></rect><rect x="5" y="3" width="5" height="18" rx="1"></rect></svg></button><div aria-label="Material motion" class="flex w-full rounded-xl bg-muted/70 p-1 sm:w-auto" role="group"><button aria-pressed="true" class="relative min-h-10 flex-1 rounded-lg px-3 font-medium text-foreground/70 text-xs focus-visible:outline-2 focus-visible:outline-ring sm:px-4" type="button"><span aria-hidden="true" class="absolute inset-0 rounded-lg border border-border/60 bg-background shadow-sm"></span><span class="relative">Calm</span></button><button aria-pressed="false" class="relative min-h-10 flex-1 rounded-lg px-3 font-medium text-foreground/70 text-xs focus-visible:outline-2 focus-visible:outline-ring sm:px-4" type="button"><span class="relative">Energetic</span></button></div></div><style>
143        .hero-material-orb[data-paused="true"] *,
144        .hero-material-orb[data-paused="true"] *::before,
145        .hero-material-orb[data-paused="true"] *::after {
146          animation-play-state: paused !important;
147        }
148      </style></div></div></div></div></div></section><section class="bg-background px-8 py-8 transition"><div class="mx-auto flex max-w-7xl flex-col items-center justify-center gap-4 sm:flex-row sm:gap-6"><div class="flex items-center gap-3"><div class="flex -space-x-2"><img alt="" aria-hidden="true" class="size-7 rounded-full border-2 border-background object-cover" draggable="false" height="28" loading="lazy" src="https://unavatar.io/x/orcdev" width="28"/><img alt="" aria-hidden="true" class="size-7 rounded-full border-2 border-background object-cover" draggable="false" height="28" loading="lazy" src="https://unavatar.io/x/jaykosai" width="28"/><img alt="" aria-hidden="true" class="size-7 rounded-full border-2 border-background object-cover" draggable="false" height="28" loading="lazy" src="https://unavatar.io/x/Lucas_Moveset" width="28"/><img alt="" aria-hidden="true" class="size-7 rounded-full border-2 border-background object-cover" draggable="false" height="28" loading="lazy" src="https://unavatar.io/x/Potato___Dragon" width="28"/><img alt="" aria-hidden="true" class="size-7 rounded-full border-2 border-background object-cover" draggable="false" height="28" loading="lazy" src="https://unavatar.io/x/openhunts" width="28"/><img alt="" aria-hidden="true" class="size-7 rounded-full border-2 border-background object-cover" draggable="false" height="28" loading="lazy" src="https://unavatar.io/x/PeteCapeCod" width="28"/></div><span class="text-muted-foreground text-sm">Loved by developers building with shadcn/ui</span></div><span aria-hidden="true" class="hidden h-4 w-px bg-border sm:block"></span><a class="flex items-center gap-2 font-medium text-sm transition-colors hover:text-brand" rel="noopener noreferrer" target="_blank" href="https://github.com/educlopez/smoothui"><svg class="size-3.5" fill="currentColor" viewBox="0 0 24 24"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="truncate">educlopez/smoothui</span></a></div></section><section class="@container relative bg-background px-8 py-24 transition"><div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><div class="max-w-2xl mx-auto text-center"><h2 class="text-balance font-semibold font-title text-3xl text-foreground transition md:text-4xl text-center" style="opacity:0;transform:translateY(10px)">Browse Smooth<span class="text-brand">UI</span></h2><p class="mt-4 text-balance text-primary-foreground transition text-center" style="opacity:0;transform:translateY(10px)">Drawings of what each area holds — the same illustration language we use in the theme settings.</p></div><div class="mt-12">
148<div class="grid w-full @2xl:grid-cols-3 grid-cols-1 gap-4"><div class="group relative flex h-full flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary"><div aria-hidden="true" class="relative mb-5 flex min-h-40 items-center justify-center"><div class="grid w-56 grid-cols-3 gap-2"><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="h-5 w-12 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="flex h-4 w-8 items-center rounded-full p-0.5 border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"><div class="size-3 translate-x-3.5 rounded-full bg-white shadow-sm"></div></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="flex size-4 items-center justify-center rounded-[5px] border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
148ox="0 0 24 24" class="text-white"><polygon points="7.959 20.513 1.592 12.872 3.128 11.592 8.041 17.487 20.947 3.587 22.413 4.948 7.959 20.513" stroke-width="0" fill="currentColor"></polygon></svg></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="flex -space-x-1.5"><div class="size-5 rounded-full border-2 border-background bg-foreground/15"></div><div class="size-5 rounded-full border-2 border-background bg-foreground/[0.07]"></div></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="flex h-5 w-14 items-center rounded-md border border-border px-1.5"><div class="h-2.5 w-px bg-brand"></div></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="h-4 w-10 rounded-full bg-foreground/15"></div></div></div></div><h3 class="font-semibold text-foreground text-lg tracking-tight"><a class="rounded after:absolute after:inset-0 after:rounded-2xl focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:outline-ring focus-visible:after:outline-offset-2" href="/docs/components">Components</a></h3><p class="mt-1.5 text-muted-foreground text-sm leading-relaxed">Motion-ready primitives you drop into any React app.</p></div><div class="group relative flex h-full flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary"><div aria-hidden="true" class="relative mb-5 flex min-h-40 items-center justify-center"><div class="flex h-36 w-56 gap-2">
148<div class="w-8 shrink-0 rounded-lg bg-foreground/[0.07]"></div><div class="flex min-w-0 flex-1 flex-col gap-2"><div class="h-3.5 shrink-0 rounded-md bg-foreground/[0.07]"></div><div class="flex flex-1 flex-col gap-2 rounded-lg border border-border bg-background p-2 shadow-sm"><div class="grid grid-cols-3 gap-1.5"><div class="flex flex-col gap-1 rounded-md border border-border p-1.5"><div class="h-1.5 w-2/3 rounded-full bg-foreground/[0.07]"></div><div class="h-2 w-full rounded-full bg-foreground/15"></div></div><div class="flex flex-col gap-1 rounded-md border border-border p-1.5"><div class="h-1.5 w-2/3 rounded-full bg-foreground/[0.07]"></div><div class="h-2 w-full rounded-full bg-foreground/15"></div></div><div class="flex flex-col gap-1 rounded-md border border-border p-1.5"><div class="h-1.5 w-2/3 rounded-full bg-foreground/[0.07]"></div><div class="h-2 w-full rounded-full bg-foreground/15"></div></div></div><div class="flex flex-1 items-end gap-1"><div class="flex-1 rounded-t-sm bg-foreground/15" style="height:60%"></div>
148<div class="flex-1 rounded-t-sm bg-foreground/[0.07]" style="height:85%"></div><div class="flex-1 rounded-t-sm bg-foreground/15" style="height:45%"></div><div class="flex-1 rounded-t-sm bg-foreground/[0.07]" style="height:100%"></div><div class="flex-1 rounded-t-sm bg-foreground/15" style="height:70%"></div><div class="flex-1 rounded-t-sm bg-foreground/[0.07]" style="height:90%"></div></div></div></div></div></div><h3 class="font-semibold text-foreground text-lg tracking-tight"><a class="rounded after:absolute after:inset-0 after:rounded-2xl focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:outline-ring focus-visible:after:outline-offset-2" href="/docs/blocks">Blocks</a></h3><p class="mt-1.5 text-muted-foreground text-sm leading-relaxed">Pre-built page sections — heroes, pricing, FAQs.</p></div><div class="group relative flex h-full flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary"><div aria-hidden="true" class="relative mb-5 flex min-h-40 items-center justify-center"><div class="flex items-center justify-center [&amp;&gt;*:not(:first-child)]:-ml-16"><div class="h-32 w-44 shrink-0 overflow-hidden rounded-xl border border-border bg-background shadow-sm" style="rotate:-5deg;translate:0 6px"><div class="flex h-3.5 items-center gap-1 border-border border-b px-2">
148<div class="size-1 rounded-full bg-foreground/[0.07]"></div><div class="size-1 rounded-full bg-foreground/[0.07]"></div><div class="size-1 rounded-full bg-foreground/[0.07]"></div></div><div class="flex flex-col items-center gap-1.5 px-3 pt-4"><div class="h-2.5 w-24 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-1.5 w-16 rounded-full bg-foreground/[0.07]"></div><div class="h-1.5 w-12 rounded-full bg-foreground/[0.07]"></div><div class="mt-2 grid w-full grid-cols-3 gap-1.5"><div class="h-7 rounded-md bg-foreground/[0.07]"></div><div class="h-7 rounded-md bg-foreground/[0.07]"></div><div class="h-7 rounded-md bg-foreground/[0.07]"></div></div></div></div><div class="h-32 w-44 shrink-0 overflow-hidden rounded-xl border border-border bg-background shadow-sm" style="rotate:3deg;translate:0 -2px"><div class="flex h-3.5 items-center gap-1 border-border border-b px-2">
148<div class="size-1 rounded-full bg-foreground/[0.07]"></div><div class="size-1 rounded-full bg-foreground/[0.07]"></div><div class="size-1 rounded-full bg-foreground/[0.07]"></div></div><div class="flex flex-col items-center gap-1.5 px-3 pt-4"><div class="h-2.5 w-24 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-1.5 w-16 rounded-full bg-foreground/[0.07]"></div><div class="h-1.5 w-12 rounded-full bg-foreground/[0.07]"></div><div class="mt-2 grid w-full grid-cols-3 gap-1.5"><div class="h-7 rounded-md bg-foreground/[0.07]"></div><div class="h-7 rounded-md bg-foreground/[0.07]"></div><div class="h-7 rounded-md bg-foreground/[0.07]"></div></div></div></div></div></div><h3 class="font-semibold text-foreground text-lg tracking-tight"><a class="rounded after:absolute after:inset-0 after:rounded-2xl focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:outline-ring focus-visible:after:outline-offset-2" href="/docs/templates">Templates</a></h3><p class="mt-1.5 text-muted-foreground text-sm leading-relaxed">Full starter pages you can ship and restyle.</p></div></div></div></section><!--$?--><template id="B:0"></template><div class="flex w-full animate-pulse items-center justify-center bg-background" style="min-height:600px"><div class="h-8 w-32 rounded-md bg-muted"></div></div><!--/$--></div></div><div class="w-full bg-primary"><div class="mx-auto w-full max-w-7xl [&amp;&gt;section]:bg-transparent"><section class="relative bg-background px-8 py-24 transition"><div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><div class="max-w-2xl mx-auto text-center"><h2 class="text-balance font-semibold font-title text-3xl text-foreground transition md:text-4xl text-center" style="opacity:0;transform:translateY(10px)">Why choose Smooth<span class="text-brand">UI</span>?</h2><p class="mt-4 text-balance text-primary-foreground transition text-center" style="opacity:0;transform:translateY(10px)">Built on the foundations you already love, with the polish you&#x27;ve been wishing for.</p></div><div class="mt-16 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-4 lg:items-start"><div class="group relative flex h-full flex-col overflow-hidden rounded-2xl border bg-primary/40 transition-colors hover:bg-primary md:col-span-2 lg:col-span-2 lg:row-span-2 lg:self-stretch" data-vivid-stage="features"><div class="relative flex min-h-72 flex-1 items-center justify-center overflow-hidden"><img alt="" aria-hidden="true" data-landing-background="features" draggable="false" loading="lazy" decoding="async" data-nimg="fill" class="object-cover motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-105 motion-safe:group-focus-within:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://ik.imagekit.io/16u211libb/smoothui/scenes/coral-cyan.webp?tr=w-1280,f-auto"/><svg aria-hidden="true" class="pointer-events-none absolute inset-0 size-full opacity-[0.22] dark:opacity-[0.18]" data-artwork-pattern="squares" focusable="false" style="mask-image:linear-gradient(to bottom, transparent 10%, #000 52%, #0009 100%)"><defs><pattern height="12" id="_R_4jkltpfl5b_" patternUnits="userSpaceOnUse" width="12"><rect fill="white" height="1.5" width="1.5" x="5.25" y="5.25"></rect></pattern></defs><rect fill="url(#_R_4jkltpfl5b_)" height="100%" width="100%"></rect></svg><div class="relative z-10 flex w-full items-center justify-center p-6"><div class="flex items-center justify-center [&amp;&gt;*:not(:first-child)]:-ml-6"><div class="flex h-36 w-24 shrink-0 flex-col gap-1.5 overflow-hidden rounded-xl border border-border bg-background p-2 shadow-sm"><div class="flex h-5 shrink-0 items-center rounded-full px-2 font-mono text-[9px] text-muted-foreground bg-foreground
148/[0.07]">Siri Orb</div><div class="min-h-0 flex-1 rounded-lg bg-foreground/[0.07]"></div><div class="h-2 w-10 shrink-0 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-1.5 w-full shrink-0 rounded-full bg-foreground/[0.07]"></div><div class="h-1.5 w-2/3 shrink-0 rounded-full bg-foreground/[0.07]"></div></div><div class="flex h-36 w-24 shrink-0 flex-col gap-1.5 overflow-hidden rounded-xl border border-border bg-background p-2 shadow-sm"><div class="flex h-5 shrink-0 items-center rounded-full px-2 font-mono text-[9px] text-muted-foreground bg-foreground/[0.07]">Island</div><div class="min-h-0 flex-1 rounded-lg bg-foreground/[0.07]"></div><div class="h-2 w-10 shrink-0 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div>
148<div class="h-1.5 w-full shrink-0 rounded-full bg-foreground/[0.07]"></div><div class="h-1.5 w-2/3 shrink-0 rounded-full bg-foreground/[0.07]"></div></div><div class="flex h-36 w-24 shrink-0 flex-col gap-1.5 overflow-hidden rounded-xl border border-border bg-background p-2 shadow-sm"><div class="flex h-5 shrink-0 items-center rounded-full px-2 font-mono text-[9px] text-muted-foreground bg-foreground/[0.07]">Number</div><div class="min-h-0 flex-1 rounded-lg bg-foreground/[0.07]"></div><div class="h-2 w-10 shrink-0 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-1.5 w-full shrink-0 rounded-full bg-foreground/[0.07]"></div><div class="h-1.5 w-2/3 shrink-0 rounded-full bg-foreground/[0.07]"></div></div><div class="flex h-36 w-24 shrink-0 flex-col gap-1.5 overflow-hidden rounded-xl border border-border bg-background p-2 shadow-sm"><div class="flex h-5 shrink-0 items-center rounded-full px-2 font-mono text-[9px] text-muted-foreground bg-foreground
148/[0.07]">Wave</div><div class="min-h-0 flex-1 rounded-lg bg-foreground/[0.07]"></div><div class="h-2 w-10 shrink-0 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-1.5 w-full shrink-0 rounded-full bg-foreground/[0.07]"></div><div class="h-1.5 w-2/3 shrink-0 rounded-full bg-foreground/[0.07]"></div></div></div></div></div><div class="relative border-t bg-background p-6 text-foreground" data-lead-caption="true"><h3 class="mb-2 font-semibold text-xl tracking-tight"><a class="rounded focus-visible:outline-2 focus-visible:outline-ring" href="/docs/components">Smooth animations</a></h3><p class="max-w-md text-muted-foreground text-sm">Every component ships with motion built in — powered by Motion and GSAP, tuned for spring physics, and fully reduced-motion aware.</p></div></div><div class="group relative flex flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary lg:col-span-2"><div class="mb-5 flex min-h-40 items-center justify-center"><div class="grid w-full max-w-xs grid-cols-3 gap-2.5"><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="h-5 w-12 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="flex h-4 w-8 items-center rounded-full p-0.5 border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"><div class="size-3 translate-x-3.5 rounded-full bg-white shadow-sm"></div></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="flex size-4 items-center justify-center rounded-[5px] border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewB
148ox="0 0 24 24" class="text-white"><polygon points="7.959 20.513 1.592 12.872 3.128 11.592 8.041 17.487 20.947 3.587 22.413 4.948 7.959 20.513" stroke-width="0" fill="currentColor"></polygon></svg></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="flex -space-x-1.5"><div class="size-5 rounded-full border-2 border-background bg-foreground/15"></div><div class="size-5 rounded-full border-2 border-background bg-foreground/[0.07]"></div></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="flex h-5 w-14 items-center rounded-md border border-border px-1.5"><div class="h-2.5 w-px bg-brand"></div></div></div><div class="flex h-14 items-center justify-center rounded-xl border border-border bg-background"><div class="h-4 w-10 rounded-full bg-foreground/15"></div></div></div></div><div class="flex items-center gap-2"><svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.001 13.5001C11.1725 13.5001 10.501 12.8285 10.501 12.0001C10.501 11.1716 11.1725 10.5001 12.001 10.5001C12.8294 10.5001 13.501 11.1716 13.501 12.0001C13.501 12.8285 12.8294 13.5001 12.001 13.5001ZM11.4733 16.4945C11.6479 16.705 11.8239 16.908 12.001 17.103C12.178 16.908 12.3541 16.705 12.5286 16.4945C12.3538 16.4982 12.1779 16.5001 12.001 16.5001C11.824 16.5001 11.6481 16.4982 11.4733 16.4945ZM9.47837 16.3694C8.6762 16.2846 7.91035 16.1603 7.19268 16.0016C7.11832 16.3512 7.06134 16.6904 7.02243 17.0166C6.83358 18.6 7.09805 19.5617 7.50098 19.7943C7.9039 20.0269 8.86893 19.7751 10.1458 18.8199C10.4088 18.6231 10.6741 18.4042 10.9397 18.1649C10.4434 17.6228 9.95287 17.0217 9.47837 16.3694ZM16.8093 16.0016C16.0916 16.1603 15.3257 16.2846 14.5236 16.3694C14.0491 17.0217 13.5585 17.6228 13.0622 18.1649C13.3279 18.4042 13.5931 18.6231 13.8562 18.8199C15.133 19.7751 16.0981 20.0269 16.501 19.7943C16.9039 19.5617 17.1684 18.6 16.9795 17.0166C16.9406 16.6904 16.8836 16.3512 16.8093 16.0016ZM18.2598 15.6136C18.8364 18.2526 18.5328 20.3533 17.251 21.0933C15.9691 21.8334 13.9981 21.046 12.001 19.2271C10.0038 21.046 8.03282 21.8334 6.75098 21.0933C5.46913 20.3533 5.16555 18.2526 5.74217 15.6136C3.16842 14.7935 1.50098 13.4802 1.50098 12.0001C1.50098 10.5199 3.16842 9.20668 5.74217 8.38654C5.16555 5.74754 5.46913 3.64687 6.75098 2.9068C8.03282 2.16673 10.0038 2.95415 12.001 4.77302C13.9981 2.95415 15.9691 2.16673 17.251 2.9068C18.5328 3.64687 18.8364 5.74754 18.2598 8.38654C20.8335 9.20668 22.501 10.5199 22.501 12.0001C22.501 13.4802 20.8335 14.7935 18.2598 15.6136ZM10.9397 5.83521C10.6741 5.59597 10.4088 5.37703 10.1458 5.18024C8.86893 4.22499 7.9039 3.97321 7.50098 4.20584C7.09805 4.43847 6.83358 5.4001 7.02243 6.9835C7.06134 7.30969 7.11832 7.6489 7.19268 7.99857C7.91035 7.83985 8.6762 7.71556 9.47837 7.63078C9.95287 6.97848 10.4434 6.37737 10.9397 5.83521ZM14.5236 7.63078C15.3257 7.71556 16.0916 7.83985 16.8093 7.99857C16.8836 7.6489 16.9406 7.30969 16.9795 6.9835C17.1684 5.4001 16.9039 4.43847 16.501 4.20584C16.0981 3.97321 15.133 4.22499 13.8562 5.18024C13.5931 5.37703 13.3279 5.59597 13.0622 5.83521C13.5585 6.37737 14.0491 6.97848 14.5236 7.63078ZM12.5286 7.50565C12.3541 7.2951
1485 12.178 7.09211 12.001 6.89711C11.8239 7.09211 11.6479 7.29515 11.4733 7.50565C11.6481 7.50194 11.824 7.50007 12.001 7.50007C12.1779 7.50007 12.3538 7.50194 12.5286 7.50565ZM8.37252 14.7042C8.28191 14.5547 8.19233 14.4033 8.10386 14.2501C8.01539 14.0968 7.92906 13.9435 7.84488 13.7903C7.74985 14.0467 7.66205 14.3007 7.58169 14.5515C7.83908 14.6074 8.10295 14.6583 8.37252 14.7042ZM10.3049 14.9377C10.8579 14.9788 11.4251 15.0001 12.001 15.0001C12.5769 15.0001 13.144 14.9788 13.697 14.9377C14.0091 14.4793 14.3111 13.9988 14.5991 13.5001C14.887 13.0013 15.1522 12.4995 15.393 12.0001C15.1522 11.5006 14.887 10.9988 14.5991 10.5001C14.3111 10.0013 14.0091 9.52081 13.697 9.06246C13.144 9.02133 12.5769 9.00007 12.001 9.00007C11.4251 9.00007 10.8579 9.02133 10.3049 9.06246C9.99283 9.52081 9.69086 10.0013 9.4029 10.5001C9.11494 10.9988 8.8498 11.5006 8.60892 12.0001C8.8498 12.4995 9.11494 13.0013 9.4029 13.5001C9.69086 13.9988 9.99283 14.4793 10.3049 14.9377ZM16.1571 10.2098C16.2521 9.9534 16.3399 9.6994 16.4203 9.44859C16.1629 9.39278 15.899 9.34182 15.6294 9.29591C15.72 9.44543 15.8096 9.59683 15.8981 9.75007C15.9866 9.9033 16.0729 10.0566 16.1571 10.2098ZM6.13143 9.83671C5.79142 9.94714 5.46917 10.0674 5.16723 10.1968C3.70154 10.825 3.00098 11.5348 3.00098 12.0001C3.00098 12.4653 3.70154 13.1752 5.16723 13.8033C5.46917 13.9327 5.79142 14.053 6.13143 14.1634C6.35281 13.4625 6.6281 12.7371 6.95576 12.0001C6.6281 11.263 6.35281 10.5376 6.13143 9.83671ZM7.58169 9.44859C7.66205 9.6994 7.74985 9.9534 7.84488 10.2098C7.92906 10.0566 8.01539 9.9033 8.10386 9.75007C8.19233 9.59683 8.28191 9.44543 8.37252 9.29591C8.10295 9.34182 7.83908 9.39278 7.58169 9.44859ZM17.8705 14.1634C18.2105 14.053 18.5328 13.9327 18.8347 13.8033C20.3004 13.1752 21.001 12.4653 21.001 12.0001C21.001 11.5348 20.3004 10.825 18.8347 10.1968C18.5328 10.0674 18.2105 9.94714 17.8705 9.83671C17.6491 10.5376 17.3739 11.263 17.0462 12.0001C17.3739 12.7371 17.6491 13.4625 17.8705 14.1634ZM16.4203 14.5515C16.3399 14.3007 16.2521 14.0467 16.1571 13.7903C16.0729 13.9435 15.9866 14.0968 15.8981 14.2501C15.8096 14.4033 15.72 14.5547 15.6294 14.7042C15.899 14.6583 16.1629 14.6074 16.4203 14.5515Z" fill="currentColor"></path></svg><h3 class="font-semibold text-foreground text-lg tracking-tight">Modern React</h3></div><p class="mt-1.5 text-muted-foreground text-sm">Server Components, TypeScript and hooks throughout — built for React 19.</p></div><div class="group relative flex flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary"><div class="mb-5 flex min-h-40 items-center justify-center"><div class="flex w-full max-w-[15rem] flex-col gap-3"><div class="flex items-center justify-between px-0.5">
148<div class="h-2 w-8 rounded-full bg-foreground/[0.07]"></div><div class="h-2 w-12 rounded-full bg-foreground/15"></div></div><div class="flex items-center gap-2 rounded-xl border border-border bg-background p-2.5 shadow-sm"><div class="size-8 rounded-lg bg-foreground/15"></div><div class="flex flex-1 flex-col gap-1"><div class="h-2 w-14 rounded-full bg-foreground/15"></div><div class="h-1.5 w-20 rounded-full bg-foreground/[0.07]"></div></div><div class="flex size-3.5 items-center justify-center rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"><svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 24 24" class="text-white"><polygon points="7.959 20.513 1.592 12.872 3.128 11.592 8.041 17.487 20.947 3.587 22.413 4.948 7.959 20.513" stroke-width="0" fill="currentColor"></polygon></svg></div></div><div class="flex gap-1.5"><div class="flex h-7 flex-1 items-center justify-center rounded-md border text-[9px] capitalize border-border bg-background text-muted-foreground shadow-sm">crisp</div><div class="flex h-7 flex-1 items-center justify-center rounded-md text-[9px] capitalize border-[0.5px] bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))] border-transparent">soft</div><div class="flex h-7 flex-1 items-center justify-center rounded-md border text-[9px] capitalize border-border bg-background text-muted-foreground shadow-sm">round</div></div></div></div><div class="flex items-center gap-2"><svg aria-hidden="true" class="size-4" fill="currentColor" viewBox="0 0 133 80"><path d="M66.5 0C48.7668 0 37.6832 8.86684 33.25 26.6C39.9 17.7332 47.6582 14.4082 56.525 16.625C61.5837 17.8895 65.1996 21.56 69.2021 25.6222C75.7222 32.2406 83.2679 39.9 99.75 39.9C117.483 39.9 128.567 31.0332 133 13.3C126.35 22.1668 118.592 25.4918 109.725 23.275C104.666 22.0105 101.05 18.34 97.0479 14.2778C90.5278 7.65945 82.9821 0 66.5 0ZM33.25 39.9C15.5168 39.9 4.43316 48.7668 0 66.5C6.65 57.6332 14.4082 54.3082 23.275 56.525C28.3337 57.7895 31.9496 61.46 35.9521 65.5222C42.4722 72.1405 50.0179 79.8 66.5 79.8C84.2332 79.8 95.3168 70.9332 99.75 53.2C93.1 62.0668 85.3418 65.3918 76.475 63.175C71.4163 61.9105 67.8004 58.24 63.7979 54.1778C57.2778 47.5594 49.7321 39.9 33.25 39.9Z"></path></svg><h3 class="font-semibold text-foreground text-lg tracking-tight">Tailwind CSS v4</h3></div><p class="mt-1.5 text-muted-foreground text-sm">The latest utility-first engine, with a unified token spine.</p></div><div class="group relative flex flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary self-stretch"><div class="mb-5 flex min-h-40 items-center justify-center"><div class="flex w-full max-w-[15rem] flex-col gap-2.5"><div class="flex items-center gap-2 rounded-xl border border-border bg-background px-3 py-2.5 shadow-sm"><div class="size-7 rounded-lg border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="flex flex-1 flex-col gap-1">
148<div class="h-2 w-14 rounded-full bg-foreground/15"></div><div class="h-1.5 w-20 rounded-full bg-foreground/[0.07]"></div></div><div class="size-4 rounded bg-foreground/[0.07]"></div></div><div class="rounded-xl border border-border bg-background p-3 shadow-sm"><div class="space-y-1.5"><div class="h-2 w-24 rounded-full bg-foreground/[0.07]"></div><div class="h-2 w-32 rounded-full bg-foreground/15"></div><div class="mt-2 h-8 w-full rounded-lg bg-foreground/[0.07]"></div></div></div></div></div><div class="flex items-center gap-2"><svg fill="currentColor" height="1em" viewBox="0 0 256 256" width="1em" xmlns="http://www.w3.org/2000/svg" class="size-4"><title>shadcn/ui logo</title><path d="M0 0h256v256H0z" fill="none"></path><path d="M208 128l-80 80M192
14940L40 192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="25"></path></svg><h3 class="font-semibold text-foreground text-lg tracking-tight">shadcn compatible</h3></div><p class="mt-1.5 text-muted-foreground text-sm">Drops into any shadcn project — same patterns, one command.</p></div></div></section></div></div><div class="w-full bg-background"><div class="mx-auto w-full max-w-7xl [&amp;&gt;section]:bg-transparent"><section class="relative bg-background px-8 py-24 transition"><div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><div class="mx-auto max-w-7xl"><div class="max-w-2xl mx-auto text-center"><h2 class="text-balance font-semibold font-title text-3xl text-foreground transition md:text-4xl text-center" style="opacity:0;transform:translateY(10px)">Elevate your design with premium blocks</h2><p class="mt-4 text-balance text-primary-foreground transition text-center" style="opacity:0;transform:translateY(10px)"><span class="font-medium text-foreground">Customizable</span> <!-- -->blocks that seamlessly<!-- --> <span class="font-medium text-foreground">adapt</span> to your project needs</p></div><div class="relative mt-8 md:mt-16"><div class="grid grid-cols-1 gap-3 md:grid-cols-3 md:gap-6 xl:grid-cols-4"><div style="opacity:0;transform:translateY(20px)"><div class="relative"><div class="frame-box relative h-[220px] w-full overflow-hidden rounded-2xl p-2"><div aria-hidden="true" class="motion-reduce:[&amp;_*]:!transform-none flex h-full items-center justify-center"><div class="flex w-full max-w-xs items-center gap-3"><div class="flex flex-1 flex-col gap-1.5">
149<div class="h-3 w-8 rounded-full bg-foreground/15"></div><div class="h-2.5 w-24 rounded-full bg-foreground/15"></div><div class="h-1.5 w-20 rounded-full bg-foreground/[0.07]"></div><div class="mt-1 flex gap-1.5"><div class="h-5 w-12 rounded-md border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-5 w-10 rounded-md border border-border bg-foreground/[0.07]"></div></div></div><div class="size-16 shrink-0 rounded-2xl bg-foreground/15"></div></div></div></div><a class="mt-3 flex min-h-11 items-center justify-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-ring" href="/docs/blocks/hero"><span class="font-medium text-foreground text-sm">Hero</span><span class="text-muted-foreground text-xs">4<!-- --> Blocks ↗</span></a></div></div><div style="opacity:0;transform:translateY(20px)"><div class="relative"><div class="frame-box relative h-[220px] w-full overflow-hidden rounded-2xl p-2"><div aria-hidden="true" class="motion-reduce:[&amp;_*]:!transform-none flex h-full items-center justify-center"><div class="w-full max-w-[14rem] space-y-1.5 rounded-xl border border-border bg-background p-2 shadow-sm"><div class="flex items-center gap-2 rounded-lg p-2"><div class="flex size-3.5 items-center justify-center rounded-full border border-border"></div><div class="flex flex-1 flex-col gap-1">
149<div class="h-1.5 w-10 rounded-full bg-foreground/15"></div><div class="h-1 w-14 rounded-full bg-foreground/[0.07]"></div></div><div class="h-3 w-6 rounded-full bg-foreground/[0.07]"></div></div><div class="flex items-center gap-2 rounded-lg p-2 border border-border bg-muted/40"><div class="flex size-3.5 items-center justify-center rounded-full border border-brand"><div class="size-1.5 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div></div><div class="flex flex-1 flex-col gap-1"><div class="h-1.5 w-10 rounded-full bg-foreground/15"></div><div class="h-1 w-14 rounded-full bg-foreground/[0.07]"></div></div><div class="h-3 w-6 rounded-full bg-foreground/15"></div></div></div></div></div><a class="mt-3 flex min-h-11 items-center justify-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-ring" href="/docs/blocks/pricing"><span class="font-medium text-foreground text-sm">Pricing</span><span class="text-muted-foreground text-xs">3<!-- --> Blocks ↗</span></a></div></div><div style="opacity:0;transform:translateY(20px)"><div class="relative"><div class="frame-box relative h-[220px] w-full overflow-hidden rounded-2xl p-2"><div aria-hidden="true" class="motion-reduce:[&amp;_*]:!transform-none flex h-full items-center justify-center"><div class="flex w-full max-w-[12rem] flex-col gap-2 rounded-xl border border-border bg-background p-3 shadow-sm">
149<div class="size-7 rounded-full bg-foreground/15"></div><div class="flex gap-0.5"><div class="size-2 rounded-sm border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="size-2 rounded-sm border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="size-2 rounded-sm border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="size-2 rounded-sm border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="size-2 rounded-sm border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div></div><div class="space-y-1">
149<div class="h-1.5 w-full rounded-full bg-foreground/[0.07]"></div><div class="h-1.5 w-4/5 rounded-full bg-foreground/[0.07]"></div></div><div class="h-1 w-12 rounded-full bg-foreground/[0.07]"></div></div></div></div><a class="mt-3 flex min-h-11 items-center justify-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-ring" href="/docs/blocks/testimonial"><span class="font-medium text-foreground text-sm">Testimonial</span><span class="text-muted-foreground text-xs">3<!-- --> Blocks ↗</span></a></div></div><div style="opacity:0;transform:translateY(20px)"><div class="relative"><div class="frame-box relative h-[220px] w-full overflow-hidden rounded-2xl p-2"><div aria-hidden="true" class="motion-reduce:[&amp;_*]:!transform-none flex h-full items-center justify-center"><div class="flex w-full max-w-[14rem] flex-col gap-1.5"><div class="overflow-hidden rounded-lg border border-border bg-background p-2 shadow-sm"><div class="flex items-center justify-between gap-2"><div class="h-1.5 w-20 rounded-full bg-foreground
149/15"></div><div class="size-2.5 rounded-sm bg-foreground/[0.07]"></div></div><div class="overflow-hidden"><div class="mt-1.5 h-1.5 w-full rounded-full bg-foreground/[0.07]"></div></div></div><div class="flex items-center justify-between rounded-lg border border-border bg-background p-2"><div class="h-1.5 w-16 rounded-full bg-foreground/[0.07]"></div><div class="size-2.5 rounded-sm bg-foreground/[0.07]"></div></div><div class="flex items-center justify-between rounded-lg border border-border bg-background p-2"><div class="h-1.5 w-16 rounded-full bg-foreground/[0.07]"></div><div class="size-2.5 rounded-sm bg-foreground/[0.07]"></div></div></div></div></div><a class="mt-3 flex min-h-11 items-center justify-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-ring" href="/docs/blocks/faqs"><span class="font-medium text-foreground text-sm">FAQs</span><span class="text-muted-foreground text-xs">2<!-- --> Blocks ↗</span></a></div></div><div style="opacity:0;transform:translateY(20px)"><div class="relative"><div class="frame-box relative h-[220px] w-full overflow-hidden rounded-2xl p-2"><div aria-hidden="true" class="motion-reduce:[&amp;_*]:!transform-none flex h-full items-center justify-center"><div class="flex w-full max-w-xs flex-col gap-2 rounded-lg border border-border bg-background p-3"><div class="flex items-center gap-2"><div class="size-3.5 rounded border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="flex gap-3">
149<div class="h-1.5 rounded-full bg-foreground/[0.07]" style="width:10px"></div><div class="h-1.5 rounded-full bg-foreground/[0.07]" style="width:12px"></div><div class="h-1.5 rounded-full bg-foreground/[0.07]" style="width:14px"></div></div><div class="ml-auto flex gap-1"><div class="size-3 rounded bg-foreground/[0.07]"></div><div class="size-3 rounded bg-foreground/[0.07]"></div></div></div><div class="h-px w-full bg-foreground/[0.07]"></div><div class="h-1 w-24 rounded-full bg-foreground/[0.07]"></div></div></div></div><a class="mt-3 flex min-h-11 items-center justify-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-ring" href="/docs/blocks/footer"><span class="font-medium text-foreground text-sm">Footer</span><span class="text-muted-foreground text-xs">2<!-- --> Blocks ↗</span></a></div></div><div style="opacity:0;transform:translateY(20px)"><div class="relative"><div class="frame-box relative h-[220px] w-full overflow-hidden rounded-2xl p-2"><div aria-hidden="true" class="motion-reduce:[&amp;_*]:!transform-none flex h-full items-center justify-center"><div class="flex w-full max-w-xs items-center justify-center gap-4">
149<div class="h-3 rounded-full bg-foreground/[0.07]" style="width:2.5rem"></div><div class="h-3 rounded-full bg-foreground/15" style="width:3.25rem"></div><div class="h-3 rounded-full bg-foreground/[0.07]" style="width:4rem"></div><div class="h-3 rounded-full bg-foreground/15" style="width:2.5rem"></div></div></div></div><a class="mt-3 flex min-h-11 items-center justify-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-ring" href="/docs/blocks/logo-clouds"><span class="font-medium text-foreground text-sm">Logo Clouds</span><span class="text-muted-foreground text-xs">2<!-- --> Blocks ↗</span></a></div></div><div style="opacity:0;transform:translateY(20px)"><div class="relative"><div class="frame-box relative h-[220px] w-full overflow-hidden rounded-2xl p-2"><div aria-hidden="true" class="motion-reduce:[&amp;_*]:!transform-none flex h-full items-center justify-center"><div class="flex w-full max-w-xs justify-center gap-4"><div class="flex flex-col items-center gap-1"><div class="flex items-center gap-0.5"><div class="size-1.5 rounded-sm border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div>
149<div class="h-4 w-8 rounded-md bg-foreground/15"></div></div><div class="h-1 w-10 rounded-full bg-foreground/[0.07]"></div></div><div class="flex flex-col items-center gap-1"><div class="flex items-center gap-0.5"><div class="size-1.5 rounded-sm border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-4 w-8 rounded-md bg-foreground/15"></div></div><div class="h-1 w-10 rounded-full bg-foreground/[0.07]"></div></div><div class="flex flex-col items-center gap-1"><div class="flex items-center gap-0.5"><div class="size-1.5 rounded-sm border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-4 w-8 rounded-md bg-foreground/15"></div></div><div class="h-1 w-10 rounded-full bg-foreground/[0.07]"></div></div></div></div></div><a class="mt-3 flex min-h-11 items-center justify-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-ring" href="/docs/blocks/stats"><span class="font-medium text-foreground text-sm">Stats</span><span class="text-muted-foreground text-xs">2<!-- --> Blocks ↗</span></a></div></div><div style="opacity:0;transform:translateY(20px)"><div class="relative"><div class="frame-box relative h-[220px] w-full overflow-hidden rounded-2xl p-2"><div aria-hidden="true" class="motion-reduce:[&amp;_*]:!transform-none flex h-full items-center justify-center"><div class="flex items-center justify-center gap-2"><div class="flex flex-col items-center gap-1 rounded-lg border border-border bg-background p-2">
149<div class="size-8 rounded-full bg-foreground/[0.07]"></div><div class="h-1.5 w-10 rounded-full bg-foreground/15"></div><div class="h-1 w-8 rounded-full bg-foreground/[0.07]"></div></div><div class="flex flex-col items-center gap-1 rounded-lg border border-border bg-background p-2"><div class="size-8 rounded-full bg-foreground/15"></div><div class="h-1.5 w-10 rounded-full bg-foreground/15"></div><div class="h-1 w-8 rounded-full bg-foreground/[0.07]"></div></div><div class="flex flex-col items-center gap-1 rounded-lg border border-border bg-background p-2"><div class="size-8 rounded-full bg-foreground/[0.07]"></div><div class="h-1.5 w-10 rounded-full bg-foreground/15"></div><div class="h-1 w-8 rounded-full bg-foreground/[0.07]"></div></div></div></div></div><a class="mt-3 flex min-h-11 items-center justify-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-ring" href="/docs/blocks/team-sections"><span class="font-medium text-foreground text-sm">Team Sections</span><span class="text-muted-foreground text-xs">2<!-- --> Blocks ↗</span></a></div></div></div><a class="relative cursor-pointer items-center justify-center whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 h-11 gap-2 rounded-lg px-8 text-base [&amp;_svg]:size-5 border-[0.5px] border-white/25 bg-gradient-to-b from-[var(--btn,var(--color-brand))] to-[var(--btn-hover,var(--color-brand-secondary))] text-[var(--btn-fg,#fff)] text-shadow-sm shadow-black/20 shadow-md ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--btn,var(--color-brand)))] hover:from-[var(--btn-hover,var(--color-brand-secondary))] hover:to-[var(--btn-hover,var(--color-brand-secondary))] [&amp;_svg]:drop-shadow-sm mx-auto mt-8 flex w-fit" href="/docs/blocks"><span class="flex items-center gap-1"><span>Browse All Blocks</span></span><svg aria-hidden="true" class="-mx-1.5 size-5 shrink-0 text-white/72" fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.333 13.333 11.667 10 8.333 6.667" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"></path></svg></a></div></div></section><section class="relative bg-background px-8 py-40 transition"><div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><div class="mx-auto w-full max-w-7xl"><div class="max-w-2xl mx-auto text-center"><h2 class="text-balance font-semibold font-title text-3xl text-foreground transition md:text-4xl text-center" style="opacity:0;transform:translateY(10px)">Built for AI-assisted development</h2><p class="mt-4 text-balance text-primary-foreground transition text-center" style="opacity:0;transform:translateY(10px)">The first component library designed for AI agents. Discover, search, and install components programmatically.</p></div><div class="mt-16 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2 lg:items-start"><div class="group relative flex h-full flex-col overflow-hidden rounded-2xl border bg-primary/40 transition-colors hover:bg-primary md:col-span-2 lg:col-span-1 lg:row-span-2 lg:self-stretch" data-vivid-stage="ai"><div class="relative flex min-h-72 flex-1 items-center justify-center overflow-hidden"><img alt="" aria-hidden="true" data-landing-background="ai" draggable="false" loading="lazy" decoding="async" data-nimg="fill" class="object-cover motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-105 motion-safe:group-focus-within:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://ik.imagekit.io/16u211libb/smoothui/scenes/fuchsia-cobalt.webp?tr=w-1280,f-auto"/><svg aria-hidden="true" class="pointer-events-none absolute inset-0 size-full opacity-[0.12] dark:opacity-[0.1]" data-artwork-pattern="c
149ontours" focusable="false" preserveAspectRatio="none" style="mask-image:radial-gradient(ellipse at 40% 62%, #000 15%, #0009 58%, transparent 100%)" viewBox="0 0 600 720"><defs><path d="M 0 -1 C .38 -1.08 .92 -.85 1 -.45 C 1.12 -.1 .7 .25 .8 .5 C .91 .8 .35 1 -.02 .88 C -.35 .72 -.35 .55 -.68 .62 C -1 .66 -1.08 .1 -.82 -.2 C -.62 -.5 -.5 -.95 0 -1 Z" id="_R_15l6ltpfl5b_" vector-effect="non-scaling-stroke"></path></defs><g fill="none" stroke="white" stroke-width="0.45"><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(26.400000000000002 24)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(50.6 46)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(74.80000000000001 68)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(99.00000000000001 90)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(123.20000000000002 112)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(147.4 134)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(171.60000000000002 156)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(195.8 178)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(220.00000000000003 200)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(244.20000000000002 222)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(268.40000000000003 244)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(292.6 266)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(316.8 288)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(341 310)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(365.20000000000005 332)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(389.40000000000003 354)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(413.6 376)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(437.8 398)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(462.00000000000006 420)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(486.20000000000005 442)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(510.40000000000003 464)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(534.6 486)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(558.8000000000001 508)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(583 530)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(607.2 552)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(631.4000000000001 574)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(655.6 596)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(679.8000000000001 618)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(704 640)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(728.2 662)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(752.4000000000001 684)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(776.6 706)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(800.8000000000001 728)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(825.0000000000001 750)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(849.2 772)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(873.4000000000001 794)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(897.6 816)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(921.8000000000001 838)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(946.0000000000001 860)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(970.2 882)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(994.4000000000001 904)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(1018.6000000000001 926)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(1042.8000000000002 948)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(1067 970)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(1091.2 992)" vector-effect="non-scaling-stroke"></use><use href="#_R_15l6ltpfl5b_" transform="translate(65 570) scale(1115.4 1014)" vector-effect="non-scaling-stroke"></use></g></svg><div class="relative z-10 flex w-full items-center justify-center p-6"><div class="flex w-full max-w-[17rem] flex-col gap-2"><div class="flex items-center gap-3 rounded-xl border border-border bg-background px-3 py-3 shadow-md"><div class="flex size-7 shrink-0 items-center justify-center rounded-lg font-mono text-[11px] border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand)
149)]">1</div><div class="flex flex-1 flex-col gap-1.5"><div class="h-2 rounded-full bg-foreground/15" style="width:70%"></div></div></div><div class="flex items-center gap-3 rounded-xl border border-border bg-background px-3 py-3 shadow-sm"><div class="flex size-7 shrink-0 items-center justify-center rounded-lg font-mono text-[11px] border border-border bg-muted font-medium text-muted-foreground">2</div><div class="flex flex-1 flex-col gap-1.5"><div class="h-2 rounded-full bg-foreground/[0.07]" style="width:55%"></div><div class="h-1.5 w-2/5 rounded-full bg-foreground/[0.07]"></div></div></div><div class="flex items-center gap-3 rounded-xl border border-border bg-background px-3 py-3 shadow-sm"><div class="flex size-7 shrink-0 items-center justify-center rounded-lg font-mono text-[11px] border border-border bg-muted font-medium text-muted-foreground">3</div><div class="flex flex-1 flex-col gap-1.5"><div class="h-2 rounded-full bg-foreground/[0.07]" style="width:55%"></div><div class="h-1.5 w-2/5 rounded-full bg-foreground/[0.07]"></div></div></div></div></div></div><div class="relative border-t bg-background p-6 text-foreground" data-lead-caption="true"><h3 class="font-semibold text-lg tracking-tight">AI agents, meet your components</h3><p class="mt-1.5 max-w-sm text-muted-foreground text-sm">The shadcn MCP server works out of the box. AI assistants discover, search, and install any component.</p></div></div><div class="group relative flex flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary lg:col-span-1"><div class="mb-5 flex justify-center"><div class="flex w-full max-w-[16rem] flex-col gap-3"><div class="flex items-center gap-2 rounded-full border border-border bg-background px-3 py-2 shadow-sm">
149<div class="size-3 rounded-full bg-foreground/[0.07]"></div><div class="h-2 flex-1 rounded-full bg-foreground/[0.07]"></div><div class="h-4 w-8 rounded-md border border-border bg-foreground/[0.07]"></div></div><div class="flex gap-1.5"><div class="h-7 flex-1 rounded-lg border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-7 flex-1 rounded-lg border border-border bg-background shadow-sm"></div></div><div class="flex flex-col gap-1.5"><div class="flex items-center gap-2.5 rounded-xl border border-border bg-background px-2.5 py-2.5 shadow-sm"><div class="size-7 shrink-0 rounded-lg border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="flex flex-1 flex-col gap-1"><div class="h-2 rounded-full bg-foreground/15" style="width:6rem"></div>
149<div class="h-1.5 w-14 rounded-full bg-foreground/[0.07]"></div></div><div class="size-1.5 shrink-0 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div></div><div class="flex items-center gap-2.5 rounded-xl border border-border bg-background px-2.5 py-2.5 shadow-sm"><div class="size-7 shrink-0 rounded-lg bg-foreground/15"></div><div class="flex flex-1 flex-col gap-1"><div class="h-2 rounded-full bg-foreground/15" style="width:6rem"></div><div class="h-1.5 w-14 rounded-full bg-foreground/[0.07]"></div></div></div></div></div></div><h3 class="font-semibold text-foreground text-lg tracking-tight">Programmatic access to everything</h3><p class="mt-1.5 text-muted-foreground text-sm">Public API with search, suggest, and source code retrieval. No auth required. OpenAPI spec included.</p></div><div class="group relative flex flex-col rounded-2xl border bg-primary/40 p-6 transition-colors hover:bg-primary lg:col-span-1"><div class="mb-4 flex justify-center"><div class="flex w-full max-w-[16rem] flex-col gap-3"><div class="flex items-center gap-2"><div class="size-4 rounded-md border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div>
149<div class="h-2 flex-1 rounded-full bg-foreground/15"></div><div class="size-1.5 rounded-full border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div></div><div class="flex gap-1.5"><div class="h-7 flex-1 rounded-lg border-[0.5px] border-white/25 bg-gradient-to-b from-brand to-brand-secondary text-white shadow-black/20 shadow-sm ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--color-brand))]"></div><div class="h-7 flex-1 rounded-lg border border-border bg-background shadow-sm"></div></div><div class="space-y-2.5 border-border border-l-2 pl-3"><div class="flex items-center gap-2"><div class="h-2 w-2 rotate-45 border-b border-l border-brand"></div><div class="h-2 rounded-full bg-foreground/15" style="width:6rem"></div><div class="ml-auto h-1.5 w-5 rounded-full bg-foreground/[0.07]"></div></div><div class="flex items-center gap-2"><div class="h-2 w-2 rotate-45 border-b border-l border-border"></div>
149<div class="h-2 rounded-full bg-foreground/[0.07]" style="width:5rem"></div><div class="ml-auto h-1.5 w-5 rounded-full bg-foreground/[0.07]"></div></div><div class="flex items-center gap-2"><div class="h-2 w-2 rotate-45 border-b border-l border-border"></div><div class="h-2 rounded-full bg-foreground/[0.07]" style="width:4.5rem"></div><div class="ml-auto h-1.5 w-5 rounded-full bg-foreground/[0.07]"></div></div></div></div></div><h3 class="font-semibold text-foreground text-lg tracking-tight">Machine-readable catalog</h3><p class="mt-1.5 text-muted-foreground text-sm">Structured component data for LLM context windows and RAG pipelines. JSON and plain text formats.</p></div></div><div class="mt-8 flex justify-center" style="opacity:0"><a class="relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [--btn-fg:#fff] [--btn-hover:var(--color-brand-secondary)] [--btn:var(--color-brand)] h-9 gap-1.5 rounded-md px-3 text-sm [&amp;_svg]:size-4 text-[var(--btn,var(--color-foreground))] hover:bg-[color-mix(in_oklab,var(--btn,var(--color-foreground))_10%,transparent)] group" href="/docs/guides/ai-integration">Learn more about AI integration<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" class="transition-transform group-hover:translate-x-1"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 13L21 13L21 11L2 11L2 13Z" fill="currentColor" data-color="color-2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12.5857 5.00003L19.5857 12L12.5857 19L13.9999 20.4142L22.4141 12L13.9999 3.58582L12.5857 5.00003Z" fill="currentColor"></path></svg></a></div></div></section><section class="relative bg-background px-8 py-32 transition"><div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><div class="mx-auto w-full max-w-7xl"><div class="relative isolate overflow-hidden rounded-3xl border border-border"><img alt="" aria-hidden="true" draggable="false" data-landing-background="uicraft" loading="lazy" decoding="async" data-nimg="fill" class="-z-10 object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://ik.imagekit.io/16u211libb/smoothui/scenes/cobalt-pink.webp?tr=w-1280,f-auto"/><svg aria-hidden="true" class="pointer-events-none absolute inset-0 size-full opacity-[0.12] dark:opacity-[0.1]" data-artwork-pattern="contours" focusable="false" preserveAspectRatio="none" style="mask-image:radial-gradient(ellipse at 40% 62%, #000 15%, #0009 58%, transparent 100%)" viewBox="0 0 600 720"><defs><path d="M 0 -1 C .38 -1.08 .92 -.85 1 -.45 C 1.12 -.1 .7 .25 .8 .5 C .91 .8 .35 1 -.02 .88 C -.35 .72 -.35 .55 -.68 .62 C -1 .66 -1.08 .1 -.82 -.2 C -.62 -.5 -.5 -.95 0 -1 Z" id="_R_lmltpfl5b_" vector-effect="non-scaling-stroke"></path></defs><g fill="none" stroke="white" stroke-width="0.45"><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(26.400000000000002 24)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(50.6 46)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(74.80000000000001 68)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(99.00000000000001 90)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(123.20000000000002 112)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(147.4 134)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(171.60000000000002 156)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(195.8 178)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(220.00000000000003 200)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(244.20000000000002 222)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(268.40000000000003 244)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(292.6 266)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(316.8 288)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(341 310)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(365.20000000000005 332)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(389.40000000000003 354)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(413.6 376)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(437.8 398)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(462.00000000000006 420)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(486.20000000000005 442)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(510.40000000000003 464)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(534.6 486)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(558.8000000000001 508)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(583 530)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(607.2 552)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(631.4000000000001 574)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(655.6 596)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(679.8000000000001 618)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(704 640)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(728.2 662)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(752.4000000000001 684)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(776.6 706)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(800.8000000000001 728)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(825.0000000000001 750)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(849.2 772)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(873.4000000000001 794)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(897.6 816)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(921.8000000000001 838)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(946.0000000000001 860)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(970.2 882)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(994.4000000000001 904)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(1018.6000000000001 926)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(1042.8000000000002 948)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(1067 970)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(1091.2 992)" vector-effect="non-scaling-stroke"></use><use href="#_R_lmltpfl5b_" transform="translate(65 570) scale(1115.4 1014)" vector-effect="non-scaling-stroke"></use></g></svg><div class="relative px-4 py-10 md:px-12 md:py-16"><div class="mx-auto flex max-w-3xl flex-col items-center gap-5 rounded-2xl border border-border bg-background px-4 py-10 text-center shadow-xl md:px-8 md:py-12" data-uicraft-copy="true"><div style="opacity:0;transform:translateY(16px)"><img alt="UI Craft" draggable="false" loading="lazy" width="56" height="56" decoding="async" data-nimg="1" class="size-14 rounded-2xl shadow-black/20 shadow-lg ring-1 ring-white/40" style="color:transparent" srcSet="/_next/image?url=%2Ficon-ui-craft.png&amp;w=64&amp;q=75&amp;dpl=dpl_3beBMnV12dktG4VSVCH7aMMFSKYB 1x, /_next/image?url=%2Ficon-ui-craft.png&amp;w=128&amp;q=75&amp;dpl=dpl_3beBMnV12dktG4VSVCH7aMMFSKYB 2x" src="/_next/image?url=%2Ficon-ui-craft.png&amp;w=128&amp;q=75&amp;dpl=dpl_3beBMnV12dktG4VSVCH7aMMFSKYB"/></div><span class="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.18em]" style="opacity:0;transform:translateY(16px)">UI Craft</span><h2 class="max-w-2xl text-balance font-semibold font-title text-3xl text-foreground tracking-tight md:text-5xl" style="opacity:0;transform:translateY(16px)">The system behind design taste</h2><p class="max-w-xl text-balance text-muted-foreground" style="opacity:0;transform:translateY(16px)">Anti-slop detection, a scored quality gate, and a convergence loop — so your agent ships UI you&#x27;d actually put in production.</p><div class="mt-3 w-full min-w-0" style="opacity:0;transform:translateY(16px)"><div class="flex flex-col items-center gap-2 w-full min-w-0"><div class="inline-flex max-w-full items-center gap-1 rounded-xl border border-border bg-muted/60 py-1.5 pr-1 pl-1.5 shadow-[0_1px_2px_oklch(0%_0_0/0.08)] backdrop-blur-md"><button type="button" id="radix-_R_5ltmltpfl5b_" aria-haspopup="menu" aria-expanded="false" data-state="closed" data-slot="dropdown-menu-trigger" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg px-2 py-1 font-medium text-foreground text-sm transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><svg aria-hidden="true" class="size-[15px] shrink-0 text-muted-foreground" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" viewBox="0 0 24 24">
149<path d="M12 2 21 7v10l-9 5-9-5V7z"></path></svg><span>brew</span><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true" class="size-3.5 text-muted-foreground"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.58588 8.00003L12.0001 18.4142L22.4143 8.00003L21.0001 6.58582L12.0001 15.5858L3.00009 6.58582L1.58588 8.00003Z" fill="currentColor"></path></svg></button><span aria-hidden="true" class="my-1 w-px self-stretch bg-border"></span><span aria-hidden="true" class="select-none pl-1 font-mono text-muted-foreground text-sm">$</span><span class="relative block min-w-0 max-w-[min(100vw-12rem,28rem)] overflow-hidden" style="transition:width 400ms cubic-bezier(0.32, 0.72, 0, 1)"><span aria-hidden="true" class="pointer-events-none invisible absolute whitespace-nowrap font-mono text-sm">brew install --cask educlopez/tap/ui-craft</span><code class="block max-w-full overflow-x-auto whitespace-nowrap font-mono text-foreground text-sm [scrollbar-width:none] [&amp;::-webkit-scrollbar]:hidden">brew install --cask educlopez/tap/ui-craft</code></span><button aria-label="Copy install command" class="group relative flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" type="button"><span style="opacity:1"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="size-4"><path d="M10.5 7C9.11929 7 8 8.11929 8 9.5V20.5C8 21.8807 9.11929 23 10.5 23H19.5C20.8807 23 22 21.8807 22 20.5V9.5C22 8.11929 20.8807 7 19.5 7H10.5Z" fill="currentColor"></path><path d="M2 3.5C2 2.11929 3.11929 1 4.5 1H13.5C14.8807 1 16 2.11929 16 3.5V5H10.5C8.01472 5 6 7.01472 6 9.5V17H4.5C3.11929 17 2 15.8807 2 14.5V3.5Z" fill="currentColor" data-color="color-2"></path></svg></span><span aria-live="polite" class="sr-only"></span></button></div><p class="font-mono text-muted-foreground text-xs">Then run ui-craft install</p></div></div><div style="opacity:0;transform:translateY(16px)"><a class="group mt-2 flex items-center gap-1.5 font-medium text-foreground/80 text-sm transition-colors hover:text-foreground" rel="noopener noreferrer" target="_blank" href="https://skills.smoothui.dev">Explore UI Craft<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" class="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.58571 20L19.2928 3.29286L20.707 4.70708L3.99992 21.4142L2.58571 20Z" fill="currentColor" data-color="color-2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M19 12V5H12V3H21V12H19Z" fill="currentColor"></path></svg></a></div></div></div></div></div></section></div></div><div class="w-full bg-primary"><div class="mx-auto w-full max-w-7xl [&amp;&gt;section]:bg-transparent"><!--$?--><template id="B:1"></template><div class="flex w-full animate-pulse items-center justify-center bg-background" style="min-height:700px"><div class="h-8 w-32 rounded-md bg-muted"></div></div><!--/$--></div></div><div class="w-full bg-background"><div class="mx-auto w-full max-w-7xl [&amp;&gt;section]:bg-transparent"><section class="relative bg-background px-8 py-20 transition"><div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><div class="mx-auto w-full max-w-7xl text-center"><h2 class="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.18em]">Featured across the community</h2><blockquote class="mx-auto mt-5 max-w-3xl text-balance font-semibold font-title text-foreground text-xl tracking-tight md:text-2xl">“SmoothUI is a game-changer for frontend developers looking for polished UI components with motion-powered interactivity.”</blockquote><a class="mt-3 inline-block text-muted-foreground text-sm transition-colors hover:text-brand" href="https://peerlist.io/saxenashikhil/articles/smoothui-a-beautiful-motiondriven-ui-library-for-react-devel" rel="noopener noreferrer" target="_blank">— Shikhil Saxena, Peerlist</a><div class="mt-10" data-carousel-running="false"><div class="coverage-carousel-module__3W3Pfq__stage"><div class="coverage-carousel-module__3W3Pfq__row "><a aria-label="Peerlist" class="coverage-carousel-module__3W3Pfq__mark" href="https://peerlist.io/saxenashikhil/articles/smoothui-a-beautiful-motiondriven-ui-library-for-react-devel" rel="noopener noreferrer" style="animation-delay:0ms" target="_blank" title="Peerlist"><img alt="Peerlist" loading="lazy" width="144" height="32" decoding="async" data-nimg="1" class="h-8 w-auto max-w-full object-contain dark:rounded dark:bg-white dark:p-1" style="color:transparent" src="/community-marks/peerlist.png?dpl=dpl_3beBMnV12dktG4VSVCH7aMMFSKYB"/></a><a aria-label="DEV.to" class="coverage-carousel-module__3W3Pfq__mark" href="https://dev.to/jqueryscript/smoothui-40-animated-react-components-with-motion-8e5" rel="noopener noreferrer" style="animation-delay:70ms" target="_blank" title="DEV.to"><img alt="DEV.to" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="h-8 w-auto max-w-full object-contain dark:rounded dark:bg-white dark:p-1" style="color:transparent" src="/community-marks/dev.png?dpl=dpl_3beBMnV12dktG4VSVCH7aMMFSKYB"/></a><a aria-label="Tailkits" class="coverage-carousel-module__3W3Pfq__mark" href="https://tailkits.com/components/smoothui/" rel="noopener noreferrer" style="animation-delay:140ms" target="_blank" title="Tailkits"><img alt="Tailkits" loading="lazy" width="144" height="32" decoding="async" data-nimg="1" class="h-8 w-auto max-w-full object-contain dark:rounded dark:bg-white dark:p-1" style="color:transparent" src="/community-marks/tailkits.svg?dpl=dpl_3beBMnV12dktG4VSVCH7aMMFSKYB"/></a><a aria-label="All Shadcn" class="coverage-carousel-module__3W3Pfq__mark" href="https://allshadcn.com/blocks/smoothui/" rel="noopener noreferrer" style="animation-delay:210ms" target="_blank" title="All Shadcn"><img alt="All Shadcn" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="h-8 w-auto max-w-full object-contain dark:rounded dark:bg-white dark:p-1" style="color:transparent" src="/community-marks/all-shadcn.png?dpl=dpl_3beBMnV12dktG4VSVCH7aMMFSKYB"/></a></div></div>
149<button aria-pressed="false" class="sr-only focus:not-sr-only focus:mt-2 focus:min-h-10 focus:rounded-lg focus:px-3 focus:text-xs focus:outline-2 focus:outline-ring" type="button">Pause logo animation</button></div></div></section><section class="relative w-full bg-background px-8 py-24">
149<script id="faq-schema" type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","acceptedAnswer":{"@type":"Answer","text":"Yes, SmoothUI is completely free and open source under the MIT license. You can use all 198 animated React components in personal and commercial projects without any cost. There are no premium tiers or hidden fees - every component, block, and animation is available to everyone."},"name":"Is SmoothUI free to use?"},{"@type":"Question","acceptedAnswer":{"@type":"Answer","text":"SmoothUI is a modern React component library featuring beautifully designed UI components with smooth animations. Built with React, Tailwind CSS v4, Motion (Framer Motion), and GSAP, it provides production-ready animated components that are fully compatible with shadcn/ui. Think of it as an animated extension to shadcn/ui - you get the same copy-paste workflow with added motion and interactivity."},"name":"What is SmoothUI?"},{"@type":"Question","acceptedAnswer":{"@type":"Answer","text":"While shadcn/ui provides excellent static components, SmoothUI focuses on animated and interactive components. SmoothUI is designed to work alongside shadcn/ui - they share the same Tailwind CSS foundation and copy-paste philosophy. Use shadcn/ui for forms, dialogs, and basic UI, then add SmoothUI for animated cards, smooth transitions, interactive buttons, and motion effects that bring your interface to life."},"name":"How is SmoothUI different from shadcn/ui?"},{"@type":"Question","acceptedAnswer":{"@type":"Answer","text":"SmoothUI offers 198 components and 34 blocks including smooth animations powered by Motion (Framer Motion) and GSAP, responsive design that works on all devices, TypeScript support with full type definitions, easy customization with Tailwind CSS utility classes, built-in dark mode support, and accessibility features including reduced motion support. Components range from animated buttons and cards to complex interactive elements like Dynamic Island and expandable cards."},"name":"What features does SmoothUI offer?"},{"@type":"Question","acceptedAnswer":{"@type":"Answer","text":"Installing SmoothUI is simple with the shadcn CLI. Run 'npx shadcn@latest add https://smoothui.dev/r/component-name.json' to add any component directly to your project. You can also manually copy components from the documentation. Required dependencies include React, Tailwind CSS, Motion (framer-motion), and clsx/tailwind-merge for class utilities. Some components also use GSAP for advanced animations."},"name":"How do I install SmoothUI components?"},{"@type":"Question","acceptedAnswer":{"@type":"Answer","text":"Absolutely! SmoothUI components are designed for customization. Since you own the code (it's copied into your project, not imported from node_modules), you have full control. Customize styles using Tailwind CSS utility classes, modify animations by adjusting Motion parameters, or completely restructure components to fit your needs. The code is clean, well-documented, and follows React best practices."},"name":"Can I customize the components?"},{"@type":"Question","acceptedAnswer":{"@type":"Answer","text":"Yes, all SmoothUI components include full dark mode support out of the box. Components use Tailwind CSS dark mode classes and CSS variables, so they automatically adapt to your site's theme. Whether you use class-based or media-query dark mode detection, SmoothUI components will seamlessly switch between light and dark themes."},"name":"Does SmoothUI support dark mode?"},{"@type":"Question","acceptedAnswer":{"@type":"Answer","text":"We welcome contributions from the community! You can contribute by forking the GitHub repository, creating a feature branch, making your changes, and submitting a pull request. Whether it's new components, bug fixes, documentation improvements, or animation enhancements, all contributions help make SmoothUI better for everyone. Check our contribution guidelines on GitHub for more details."},"name":"How can I contribute to SmoothUI?"}]}</script>
149<div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><h2 class="text-balance text-center font-semibold font-title text-3xl text-foreground transition">Frequently Asked Questions</h2><div class="mx-auto mt-16 max-w-3xl space-y-4"><div data-slot="accordion" class="-space-y-1" data-orientation="vertical"><div data-state="closed" data-orientation="vertical" data-slot="accordion-item" class="peer rounded-xl border-b border-none px-6 py-1 last:border-b-0 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-foreground/5"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_8paltpfl5b_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_paltpfl5b_" data-slot="accordion-trigger" class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-none border-b py-4 text-left font-medium text-base outline-none transition-none hover:no-underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:border-transparent [&amp;[data-state=open]&gt;svg]:rotate-180" data-radix-collection-item="">Is SmoothUI free to use?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_8paltpfl5b_" hidden="" role="region" aria-labelledby="radix-_R_paltpfl5b_" data-orientation="vertical" data-slot="accordion-content" class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" data-slot="accordion-item" class="peer rounded-xl border-b border-none px-6 py-1 last:border-b-0 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-foreground/5"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_99altpfl5b_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_19altpfl5b_" data-slot="accordion-trigger" class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-none border-b py-4 text-left font-medium text-base outline-none transition-none hover:no-underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:border-transparent [&amp;[data-state=open]&gt;svg]:rotate-180" data-radix-collection-item="">What is SmoothUI?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_99altpfl5b_" hidden="" role="region" aria-labelledby="radix-_R_19altpfl5b_" data-orientation="vertical" data-slot="accordion-content" class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" data-slot="accordion-item" class="peer rounded-xl border-b border-none px-6 py-1 last:border-b-0 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-foreground
149/5"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_9paltpfl5b_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_1paltpfl5b_" data-slot="accordion-trigger" class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-none border-b py-4 text-left font-medium text-base outline-none transition-none hover:no-underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:border-transparent [&amp;[data-state=open]&gt;svg]:rotate-180" data-radix-collection-item="">How is SmoothUI different from shadcn/ui?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_9paltpfl5b_" hidden="" role="region" aria-labelledby="radix-_R_1paltpfl5b_" data-orientation="vertical" data-slot="accordion-content" class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" data-slot="accordion-item" class="peer rounded-xl border-b border-none px-6 py-1 last:border-b-0 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-foreground/5"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_a9altpfl5b_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_29altpfl5b_" data-slot="accordion-trigger" class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-none border-b py-4 text-left font-medium text-base outline-none transition-none hover:no-underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:border-transparent [&amp;[data-state=open]&gt;svg]:rotate-180" data-radix-collection-item="">What features does SmoothUI offer?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_a9altpfl5b_" hidden="" role="region" aria-labelledby="radix-_R_29altpfl5b_" data-orientation="vertical" data-slot="accordion-content" class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" data-slot="accordion-item" class="peer rounded-xl border-b border-none px-6 py-1 last:border-b-0 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-foreground/5"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_apaltpfl5b_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_2paltpfl5b_" data-slot="accordion-trigger" class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-none border-b py-4 text-left font-medium text-base outline-none transition-none hover:no-underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:border-transparent [&amp;[data-state=open]&gt;svg]:rotate-180" data-radix-collection-item="">How do I install SmoothUI components?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_apaltpfl5b_" hidden="" role="region" aria-labelledby="radix-_R_2paltpfl5b_" data-orientation="vertical" data-slot="accordion-content" 
149class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" data-slot="accordion-item" class="peer rounded-xl border-b border-none px-6 py-1 last:border-b-0 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-foreground/5"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_b9altpfl5b_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_39altpfl5b_" data-slot="accordion-trigger" class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-none border-b py-4 text-left font-medium text-base outline-none transition-none hover:no-underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:border-transparent [&amp;[data-state=open]&gt;svg]:rotate-180" data-radix-collection-item="">Can I customize the components?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_b9altpfl5b_" hidden="" role="region" aria-labelledby="radix-_R_39altpfl5b_" data-orientation="vertical" data-slot="accordion-content" class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" data-slot="accordion-item" class="peer rounded-xl border-b border-none px-6 py-1 last:border-b-0 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-foreground/5"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_bpaltpfl5b_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_3paltpfl5b_" data-slot="accordion-trigger" class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-none border-b py-4 text-left font-medium text-base outline-none transition-none hover:no-underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:border-transparent [&amp;[data-state=open]&gt;svg]:rotate-180" data-radix-collection-item="">Does SmoothUI support dark mode?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_bpaltpfl5b_" hidden="" role="region" aria-labelledby="radix-_R_3paltpfl5b_" data-orientation="vertical" data-slot="accordion-content" class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" data-slot="accordion-item" class="peer rounded-xl border-b border-none px-6 py-1 last:border-b-0 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm data-[state=open]:ring-1 data-[state=open]:ring-foreground
149/5"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-_R_c9altpfl5b_" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-_R_49altpfl5b_" data-slot="accordion-trigger" class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-none border-b py-4 text-left font-medium text-base outline-none transition-none hover:no-underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:border-transparent [&amp;[data-state=open]&gt;svg]:rotate-180" data-radix-collection-item="">How can I contribute to SmoothUI?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></h3><div data-state="closed" id="radix-_R_c9altpfl5b_" hidden="" role="region" aria-labelledby="radix-_R_49altpfl5b_" data-orientation="vertical" data-slot="accordion-content" class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div></div></div></section></div></div><div class="w-full bg-background"><div class="mx-auto w-full max-w-7xl [&amp;&gt;section]:bg-transparent"><!--$?--><template id="B:2"></template><div class="flex w-full animate-pulse items-center justify-center bg-background" style="min-height:500px"><div class="h-8 w-32 rounded-md bg-muted"></div></div><!--/$--></div></div><div class="relative z-30"><section aria-label="Support SmoothUI" class="relative bg-linear-to-b from-50% from-background to-50% to-muted/60 pt-16 md:pt-24"><div class="relative mx-auto w-full max-w-7xl px-8"><div style="opacity:0;transform:translateY(20px)"><div class="relative overflow-hidden rounded-2xl bg-card p-10 text-card-foreground shadow-lg ring-1 ring-border/70 shadow-foreground/5 md:px-20 md:py-16"><svg aria-hidden="true" class="text-muted pointer-events-none absolute inset-0 size-full translate-y-3/4 opacity-50" fill="none" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M329.205 6.05469C331.396 0.985458 337.281 -1.34888 342.351 0.84082L355.644 6.58301C356.018 6.74496 356.377 6.93032 356.722 7.13086L439.729 42.9902C444.799 45.1805 447.134 51.066 444.944 56.1357L439.202 69.4277C437.012 74.4976 431.126 76.8315 426.056 74.6416L351.12 42.2705L330.918 89.0332C376.141 114.344 408.567 159.794 416.052 213.239H429.756V278.752H397.765L397.27 282.408L386.144 369.047C383.266 392.108 380.937 415.238 377.957 438.284C376.66 448.318 375.865 459.058 373.398 468.858C372.384 471.375 371.168 473.657 369.527 475.817C353.072 497.475 312.68 504.556 287.003 508.111C273.789 510.037 260.45 510.964 247.098 510.888C217.287 510.485 162.338 502.749 138.37 484.41C133.049 480.338 128.118 475.314 126.057 468.793C124.143 462.739 123.772 455.672 122.899 449.391L117.649 411.719L99.9443 278.752H67.7119V213.239H80.5723C92.1014 130.913 162.808 67.5599 248.312 67.5596C266.066 67.5596 283.183 70.2933 299.265 75.3594L329.205 6.05469ZM298.618 347.714C290.008 349.185 284.699 357.994 277.604 362.6C260.758 373.533 233.532 371.369 217.451 359.928C211.198 355.48 206.551 346.709 197.798 348.069C194.209 348.628 190.796 350.598 188.722 353.611C186.781 356.428 186.276 360.028 186.956 363.345C188.187 369.351 193.243 374.041 197.507 378.105C213.771 391.889 237.722 397.757 258.754 395.938C277.382 394.327 294.852 386.112 306.932 371.629C309.792 368.2 311.798 364.372 311.3 359.786C310.918 356.283 309.287 352.397 306.453 350.188C304.098 348.351 301.526 347.879 298.618 347.714ZM187.43 188.242C177.489 188.242 169.43 196.301 169.43 206.242V305.578C169.43 315.519 177.489 323.578 187.43 323.578H194.529C204.47 323.578 212.529 315.519 212.529 305.578V206.242C212.529 196.301 204.47 188.242 194.529 188.242H187.43ZM302.939 188.242C292.998 188.242 284.94 196.301 284.939 206.242V305.578C284.939 315.519 292.998 323.578 302.939 323.578H310.04C319.981 323.578 328.04 315.519 328.04 305.578V206.242C328.04 196.301 319.981 188.242 310.04 188.242H302.939Z" fill="currentColor" fill-rule="evenodd"></path></svg><div class="relative text-center"><div class="mb-5 inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/60 px-3 py-1 font-medium text-xs backdrop-blur-sm"><span aria-hidden="true" class="relative flex size-2"><span class="absolute inset-0 inline-flex size-full animate-ping rounded-full bg-brand/60 opacity-75"></span>
149<span class="relative inline-flex size-2 rounded-full bg-brand"></span></span><span class="text-foreground">Open source &amp; free</span></div><h2 class="text-balance font-semibold font-title text-3xl text-foreground md:text-4xl">Support <span class="text-brand">SmoothUI</span></h2><p class="mx-auto mt-4 max-w-xl text-balance text-muted-foreground">Help keep SmoothUI free and actively maintained. Every sponsor helps ship more components, blocks, and animation recipes.</p><div class="mt-7 flex flex-wrap items-center justify-center gap-3"><a class="relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [--btn-fg:var(--color-background)] [--btn-hover:var(--color-smooth-900)] [--btn:var(--color-foreground)] h-10 gap-2 rounded-md px-4 py-2 text-sm [&amp;_svg]:size-4 bg-[var(--btn,var(--color-foreground))] text-[var(--btn-fg,var(--color-background))] shadow-xs hover:bg-[var(--btn-hover,var(--color-smooth-900))]" href="/docs/guides/sponsors">Become a sponsor<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.58571 20L19.2928 3.29286L20.707 4.70708L3.99992 21.4142L2.58571 20Z" fill="currentColor" data-color="color-2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M19 12V5H12V3H21V12H19Z" fill="currentColor"></path></svg></a><a href="https://github.com/educlopez/smoothui" rel="noopener noreferrer" target="_blank" class="relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 h-10 gap-2 rounded-md px-4 py-2 text-sm [&amp;_svg]:size-4 border border-transparent bg-background text-[var(--btn,var(--color-foreground))] shadow-black/15 shadow-sm ring-1 ring-foreground/10 hover:bg-primary dark:ring-foreground/15"><svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Star on GitHub</a></div></div></div></div></div></section><footer class="bg-muted/60 py-16 sm:py-20"><div class="mx-auto w-full max-w-7xl space-y-14 px-8"><div class="grid gap-12 md:grid-cols-5"><div class="space-y-6 md:col-span-2 md:space-y-8"><div class="not-prose inline-flex shrink-0 items-center gap-2"><svg aria-hidden="true" class="h-6 w-auto shrink-0" data-expression="neutral" fill="none" height="597" viewBox="0 0 443 597" width="443" xmlns="http://www.w3.org/2000/svg" style="display:block;transform-origin:50% 88%"><path class="fill-foreground" d="M209.511 81.9998C100.987 81.9998 13.0107 169.976 13.0107 278.5H406.011C406.011 169.976 318.035 81.9998 209.511 8
1491.9998Z" fill="#FF64B1"></path><path class="fill-foreground" d="M31.0107 279.07C37.7797 279.924 88.001 279.07 88.001 279.07L211.001 279.07C211.001 279.07 281.395 279.102 326.501 279.07C351.033 279.052 340.501 279 389.319 279C388.843 284.983 387.765 291.019 386.954 296.974L382.314 331.242L369.406 431.749C366.068 458.502 363.366 485.334 359.909 512.07C358.404 523.711 357.483 536.169 354.621 547.539C353.444 550.459 352.034 553.106 350.13 555.612C331.041 580.737 284.184 588.95 254.396 593.075C239.067 595.309 223.592 596.385 208.102 596.296C173.519 595.829 109.775 586.855 81.9698 565.58C75.7968 560.856 70.0768 555.028 67.6848 547.463C65.4648 540.44 65.0338 532.242 64.0218 524.955L57.9317 481.252L31.0107 279.07Z" fill="#FF64B1"></path><path class="stroke-background" d="M150 432 Q221.5 494 293 432" fill="none" stroke-linecap="round" stroke-width="30" style="transform:none;transform-origin:50% 50%;transform-box:fill-box"></path><rect class="fill-foreground" fill="#FF64B1" height="76" rx="10" width="420" y="251"></rect><path class="fill-foreground" d="M335.493 11.8972C335.898 12.0719 336.283 12.2729 336.652 12.4924L433.04 54.1314C438.11 56.3216 440.444 62.2072 438.254 67.2772L430.322 85.6372C428.132 90.707 422.247 93.0417 417.177 90.8515L328.776 52.6628L290.686 140.835C288.496 145.905 282.61 148.24 277.54 146.049L259.18 138.118C254.11 135.928 251.776 130.042 253.966 124.972L303.987 9.18003C306.178 4.11004 312.063 1.77552 317.133 3.96573L335.493 11.8972Z" fill="#FF64B1"></path><g style="transform:none;transform-origin:50% 50%;transform-box:fill-box"><rect class="fill-background" height="157" rx="18" width="50" x="118" y="222"></rect><rect class="fill-background" height="157" rx="18" width="50" x="252" y="222"></rect></g></svg><span class="mt-0.5 select-none font-medium font-title text-foreground text-xl leading-none">Smooth<span class="text-brand">UI</span></span></div><p class="max-w-xs text-balance text-muted-foreground text-sm leading-relaxed">Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.</p></div><div class="grid gap-8 sm:grid-cols-3 md:col-span-3"><nav aria-label="Navigate"><span class="mb-4 block font-medium text-foreground text-sm">Navigate</span><div class="flex flex-col gap-3"><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/components">Components</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/blocks">Blocks</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/templates">Templates</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/components/dynamic-island">Dynamic Island</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/components/ai-prompt-input">AI Prompt Input</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/components/siri-orb">Siri Orb</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/components/infinite-slider">Infinite Slider</a></span></div></nav><nav aria-label="Develop"><span class="mb-4 block font-medium text-foreground text-sm">Develop</span><div class="flex flex-col gap-3"><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/guides/getting-started">Getting Started</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/guides/installation">Installation</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/guides/animation-best-practices">Animations</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/guides/accessibility">Accessibility</a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="/docs/guides/changelog">Changelog</a></span></div></nav><div><nav aria-label="By the maker"><span class="mb-4 block font-medium text-foreground text-sm">
149By the maker</span><div class="flex flex-col gap-3"><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="https://sparkbites.dev" rel="noopener noreferrer" target="_blank"><span>sparkbites.dev</span><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true" class="size-3 shrink-0 opacity-60 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.58571 20L19.2928 3.29286L20.707 4.70708L3.99992 21.4142L2.58571 20Z" fill="currentColor" data-color="color-2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M19 12V5H12V3H21V12H19Z" fill="currentColor"></path></svg></a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="https://codevator.dev" rel="noopener noreferrer" target="_blank"><span>codevator.dev</span><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true" class="size-3 shrink-0 opacity-60 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.58571 20L19.2928 3.29286L20.707 4.70708L3.99992 21.4142L2.58571 20Z" fill="currentColor" data-color="color-2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M19 12V5H12V3H21V12H19Z" fill="currentColor"></path></svg></a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="https://thegridcn.com" rel="noopener noreferrer" target="_blank"><span>thegridcn.com</span><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true" class="size-3 shrink-0 opacity-60 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.58571 20L19.2928 3.29286L20.707 4.70708L3.99992 21.4142L2.58571 20Z" fill="currentColor" data-color="color-2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M19 12V5H12V3H21V12H19Z" fill="currentColor"></path></svg></a></span><span class="group block"><a class="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors duration-200 hover:text-brand" href="https://skills.smoothui.dev" rel="noopener noreferrer" target="_blank"><span>ui-craft</span><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true" class="size-3 shrink-0 opacity-60 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.58571 20L19.2928 3.29286L20.707 4.70708L3.99992 21.4142L2.58571 20Z" fill="currentColor" data-color="color-2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M19 12V5H12V3H21V12H19Z" fill="currentColor"></path></svg></a></span></div></nav><div class="mt-5 flex items-center gap-3"><a class="text-muted-foreground transition-colors duration-200 hover:text-brand" href="https://x.com/educalvolpz" rel="noopener noreferrer" target="_blank"><svg class="size-[18px]" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X (Twitter)</title><path d="M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z"></path></svg></a><a aria-label="SmoothUI on GitHub" class="text-muted-foreground transition-colors duration-200 hover:text-brand" href="https://github.com/educlopez/smoothui" rel="noopener noreferrer" target="_blank"><svg class="size-[18px]" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></div></div></div></div><div aria-hidden="true" class="h-px bg-[length:6px_1px] bg-repeat-x opacity-30 [background-image:linear-gradient(90deg,var(--color-foreground)_1px,transparent_1px)]"></div><div class="flex flex-wrap items-center justify-between gap-4"><div class="flex items-center gap-4"><p class="text-muted-foreground text-sm">© <!-- -->2026<!-- --> SmoothUI. Built by<!-- --> <a class="text-foreground underline underline-offset-4 transition-colors hover:text-brand" href="https://x.com/educalvolpz" rel="noopener noreferrer" target="_blank">Eduardo Calvo</a>.</p></div><div class="flex items-center gap-3"><div class="hidden items-center gap-3 text-smooth-800 sm:flex"><span aria-label="React" class="transition-colors duration-200 hover:text-brand" role="img" title="React"><svg aria-hidden="true" class="size-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.001 13.5001C11.1725 13.5001 10.501 12.8285 10.501 12.0001C10.501 11.1716 11.1725 10.5001 12.001 10.5001C12.8294 10.5001 13.501 11.1716 13.501 12.0001C13.501 12.8285 12.8294 13.5001 12.001 13.5001ZM11.4733 16.4945C11.6479 16.705 11.8239 16.908 12.001 17.103C12.178 16.908 12.3541 16.70
1495 12.5286 16.4945C12.3538 16.4982 12.1779 16.5001 12.001 16.5001C11.824 16.5001 11.6481 16.4982 11.4733 16.4945ZM9.47837 16.3694C8.6762 16.2846 7.91035 16.1603 7.19268 16.0016C7.11832 16.3512 7.06134 16.6904 7.02243 17.0166C6.83358 18.6 7.09805 19.5617 7.50098 19.7943C7.9039 20.0269 8.86893 19.7751 10.1458 18.8199C10.4088 18.6231 10.6741 18.4042 10.9397 18.1649C10.4434 17.6228 9.95287 17.0217 9.47837 16.3694ZM16.8093 16.0016C16.0916 16.1603 15.3257 16.2846 14.5236 16.3694C14.0491 17.0217 13.5585 17.6228 13.0622 18.1649C13.3279 18.4042 13.5931 18.6231 13.8562 18.8199C15.133 19.7751 16.0981 20.0269 16.501 19.7943C16.9039 19.5617 17.1684 18.6 16.9795 17.0166C16.9406 16.6904 16.8836 16.3512 16.8093 16.0016ZM18.2598 15.6136C18.8364 18.2526 18.5328 20.3533 17.251 21.0933C15.9691 21.8334 13.9981 21.046 12.001 19.2271C10.0038 21.046 8.03282 21.8334 6.75098 21.0933C5.46913 20.3533 5.16555 18.2526 5.74217 15.6136C3.16842 14.7935 1.50098 13.4802 1.50098 12.0001C1.50098 10.5199 3.16842 9.20668 5.74217 8.38654C5.16555 5.74754 5.46913 3.64687 6.75098 2.9068C8.03282 2.16673 10.0038 2.95415 12.001 4.77302C13.9981 2.95415 15.9691 2.16673 17.251 2.9068C18.5328 3.64687 18.8364 5.74754 18.2598 8.38654C20.8335 9.20668 22.501 10.5199 22.501 12.0001C22.501 13.4802 20.8335 14.7935 18.2598 15.6136ZM10.9397 5.83521C10.6741 5.59597 10.4088 5.37703 10.1458 5.18024C8.86893 4.22499 7.9039 3.97321 7.50098 4.20584C7.09805 4.43847 6.83358 5.4001 7.02243 6.9835C7.06134 7.30969 7.11832 7.6489 7.19268 7.99857C7.91035 7.83985 8.6762 7.71556 9.47837 7.63078C9.95287 6.97848 10.4434 6.37737 10.9397 5.83521ZM14.5236 7.63078C15.3257 7.71556 16.0916 7.83985 16.8093 7.99857C16.8836 7.6489 16.9406 7.30969 16.9795 6.9835C17.1684 5.4001 16.9039 4.43847 16.501 4.20584C16.0981 3.97321 15.133 4.22499 13.8562 5.18024C13.5931 5.37703 13.3279 5.59597 13.0622 5.83521C13.5585 6.37737 14.0491 6.97848 14.5236 7.63078ZM12.5286 7.50565C12.3541 7.2951
1495 12.178 7.09211 12.001 6.89711C11.8239 7.09211 11.6479 7.29515 11.4733 7.50565C11.6481 7.50194 11.824 7.50007 12.001 7.50007C12.1779 7.50007 12.3538 7.50194 12.5286 7.50565ZM8.37252 14.7042C8.28191 14.5547 8.19233 14.4033 8.10386 14.2501C8.01539 14.0968 7.92906 13.9435 7.84488 13.7903C7.74985 14.0467 7.66205 14.3007 7.58169 14.5515C7.83908 14.6074 8.10295 14.6583 8.37252 14.7042ZM10.3049 14.9377C10.8579 14.9788 11.4251 15.0001 12.001 15.0001C12.5769 15.0001 13.144 14.9788 13.697 14.9377C14.0091 14.4793 14.3111 13.9988 14.5991 13.5001C14.887 13.0013 15.1522 12.4995 15.393 12.0001C15.1522 11.5006 14.887 10.9988 14.5991 10.5001C14.3111 10.0013 14.0091 9.52081 13.697 9.06246C13.144 9.02133 12.5769 9.00007 12.001 9.00007C11.4251 9.00007 10.8579 9.02133 10.3049 9.06246C9.99283 9.52081 9.69086 10.0013 9.4029 10.5001C9.11494 10.9988 8.8498 11.5006 8.60892 12.0001C8.8498 12.4995 9.11494 13.0013 9.4029 13.5001C9.69086 13.9988 9.99283 14.4793 10.3049 14.9377ZM16.1571 10.2098C16.2521 9.9534 16.3399 9.6994 16.4203 9.44859C16.1629 9.39278 15.899 9.34182 15.6294 9.29591C15.72 9.44543 15.8096 9.59683 15.8981 9.75007C15.9866 9.9033 16.0729 10.0566 16.1571 10.2098ZM6.13143 9.83671C5.79142 9.94714 5.46917 10.0674 5.16723 10.1968C3.70154 10.825 3.00098 11.5348 3.00098 12.0001C3.00098 12.4653 3.70154 13.1752 5.16723 13.8033C5.46917 13.9327 5.79142 14.053 6.13143 14.1634C6.35281 13.4625 6.6281 12.7371 6.95576 12.0001C6.6281 11.263 6.35281 10.5376 6.13143 9.83671ZM7.58169 9.44859C7.66205 9.6994 7.74985 9.9534 7.84488 10.2098C7.92906 10.0566 8.01539 9.9033 8.10386 9.75007C8.19233 9.59683 8.28191 9.44543 8.37252 9.29591C8.10295 9.34182 7.83908 9.39278 7.58169 9.44859ZM17.8705 14.1634C18.2105 14.053 18.5328 13.9327 18.8347 13.8033C20.3004 13.1752 21.001 12.4653 21.001 12.0001C21.001 11.5348 20.3004 10.825 18.8347 10.1968C18.5328 10.0674 18.2105 9.94714 17.8705 9.83671C17.6491 10.5376 17.3739 11.263 17.0462 12.0001C17.3739 12.7371 17.6491 13.4625 17.8705 14.1634ZM16.4203 14.5515C16.3399 14.3007 16.2521 14.0467 16.1571 13.7903C16.0729 13.9435 15.9866 14.0968 15.8981 14.2501C15.8096 14.4033 15.72 14.5547 15.6294 14.7042C15.899 14.6583 16.1629 14.6074 16.4203 14.5515Z" fill="currentColor"></path></svg></span><span aria-label="Tailwind CSS" class="transition-colors duration-200 hover:text-brand" role="img" title="Tailwind CSS"><svg aria-hidden="true" class="h-3.5 w-auto" fill="currentColor" viewBox="0 0 133 80"><path d="M66.5 0C48.7668 0 37.6832 8.86684 33.25 26.6C39.9 17.7332 47.6582 14.4082 56.525 16.625C61.5837 17.8895 65.1996 21.56 69.2021 25.6222C75.7222 32.2406 83.2679 39.9 99.75 39.9C117.483 39.9 128.567 31.0332 133 13.3C126.35 22.1668 118.592 25.4918 109.725 23.275C104.666 22.0105 101.05 18.34 97.0479 14.2778C90.5278 7.65945 82.9821 0 66.5 0ZM33.25 39.9C15.5168 39.9 4.43316 48.7668 0 66.5C6.65 57.6332 14.4082 54.3082 23.275 56.525C28.3337 57.7895 31.9496 61.46 35.9521 65.5222C42.4722 72.1405 50.0179 79.8 66.5 79.8C84.2332 79.8 95.3168 70.9332 99.75 53.2C93.1 62.0668 85.3418 65.3918 76.475 63.175C71.4163 61.9105 67.8004 58.24 63.7979 54.1778C57.2778 47.5594 49.7321 39.9 33.25 39.9Z"></path></svg></span><span aria-label="shadcn/ui" class="transition-colors duration-200 hover:text-brand" role="img" title="shadcn/ui"><svg fill="currentColor" height="1em" viewBox="0 0 256 256" width="1em" xmlns="http://www.w3.org/2000/svg" class="size-4"><title>shadcn/ui logo</title><path d="M0 0h256v256H0z" fill="none"></path><path d="M208 128l-80 80M192
15040L40 192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="25"></path></svg></span><span aria-label="Motion" class="transition-colors duration-200 hover:text-brand" role="img" title="Motion"><svg aria-hidden="true" class="h-3.5 w-auto" fill="currentColor" viewBox="0 0 1103 386"><path d="M416.473 0 198.54 385.66H0L170.17 84.522C196.549 37.842 262.377 0 317.203 0Zm486.875 96.415c0-53.249 44.444-96.415 99.27-96.415 54.826 0 99.27 43.166 99.27 96.415 0 53.248-44.444 96.415-99.27 96.415-54.826 0-99.27-43.167-99.27-96.415ZM453.699 0h198.54L434.306 385.66h-198.54Zm234.492 0h198.542L716.56 301.138c-26.378 46.68-92.207 84.522-147.032 84.522h-99.27Z"></path></svg></span><span aria-label="GSAP" class="transition-colors duration-200 hover:text-brand" role="img" title="GSAP"><svg aria-hidden="true" class="h-3.5 w-auto" fill="currentColor" viewBox="0 0 82 30" xmlns="http://www.w3.org/2000/svg"><path d="M23.81 14.013v.013l-1.075 4.665c-.058.264-.322.458-.626.458H20.81a.218.218 0 0 0-.208.155c-1.198 4.064-2.82 6.858-4.962 8.535-1.822 1.428-4.068 2.093-7.069 2.093-2.696 0-4.514-.867-6.056-2.578C.478 25.09-.364 21.388.146 16.926 1.065 8.549 5.41.096 13.776.096c2.545-.023 4.543.762 5.933 2.33 1.47 1.657 2.216 4.154 2.22 7.421a.55.55 0 0 1-.549.536h-6.13a.42.42 0 0 1-.407-.41c-.05-2.259-.72-3.36-2.052-3.36-2.35 0-3.736 3.19-4.471 4.959-1.027 2.47-1.55 5.152-1.447 7.824.049 1.244.249 2.994 1.43 3.718 1.047.643 2.541.217 3.446-.495.904-.711 1.632-1.942 1.938-3.065.043-.156.046-.277.005-.332-.043-.055-.162-.068-.253-.068h-1.574a.572.572 0 0 1-.438-.202.42.42 0 0 1-.087-.362l1.076-4.674c.053-.24.27-.42.537-.453v-.011h10.33c.024 0 .049 0 .072.005.268.034.457.284.452.556h.002Z"></path><path d="M41.594 8.65a.548.548 0 0 1-.548.531H35.4c-.37 0-.679-.3-.679-.665 0-1.648-.57-2.45-1.736-2.45s-1.918.717-1.94 1.968c-.025 1.395.764 2.662 3.01 4.84 2.957 2.774 4.142 5.232 4.085 8.48C38.047 26.605 34.476 30 29.042 30c-2.775 0-4.895-.743-6.305-2.207-1.431-1.486-2.087-3.668-1.95-6.485a.548.548 0 0 1 .549-.53h5.84a.55.55 0 0 1 .422.209.48.48 0 0 1 .106.384c-.065 1.016.112 1.775.512 2.195.256.272.613.41 1.058.41 1.079 0 1.711-.763 1.735-2.09.02-1.148-.343-2.155-2.321-4.19-2.555-2.496-4.846-5.075-4.775-9.13.042-2.351.976-4.502 2.631-6.056C28.294.868 30.687 0 33.465 0c2.783.02 4.892.813 6.269 2.359 1.304 1.466 1.932 3.582 1.862 6.29h-.002Z"></path><path d="m59.096 29.012.037-27.932a.525.525 0 0 0-.529-.533h-8.738c-.294 0-.423.252-.507.42L36.707 28.842v.005l-.005.006c-.14.343.126.71.497.71h6.108c.33 0 .548-.1.656-.308l1.213-2.915c.149-.388.177-.424.601-.424h
1505.836c.406 0 .415.008.408.405l-.131 2.71a.525.525 0 0 0 .529.532h6.17a.522.522 0 0 0 .403-.182.458.458 0 0 0 .104-.369Zm-10.81-9.326c-.057 0-.102-.001-.138-.005a.146.146 0 0 1-.13-.183c.012-.041.029-.095.053-.163l4.377-10.827c.038-.107.086-.212.136-.314.071-.145.157-.155.184-.047.023.09-.502 11.118-.502 11.118-.041.413-.06.43-.467.464l-3.509-.041h-.008l.003-.002Z"></path><path d="M71.545.547h-4.639c-.245 0-.52.13-.585.422l-6.455 28.029a.423.423 0 0 0 .088.364.572.572 0 0 0 .437.202h5.798c.311 0 .525-.153.583-.418 0 0 .703-3.168.704-3.178.05-.247-.036-.439-.258-.555-.105-.054-.209-.108-.312-.163l-1.005-.522-1-.522-.387-.201a.186.186 0 0 1-.102-.17.199.199 0 0 1 .198-.194l3.178.014c.95.005 1.901-.062 2.836-.234 6.58-1.215 10.95-6.485 11.076-13.656.107-6.12-3.309-9.221-10.15-9.221l-.005.003Zm-1.579 16.68h-.124c-.278 0-.328-.03-.337-.04-.004-.007 1.833-8.073 1.834-8.084.047-.233.045-.367-.099-.446-.184-.102-2.866-1.516-2.866-1.516a.188.188 0 0 1-.101-.172.197.197 0 0 1 .197-.192h4.241c1.32.04 2.056 1.221 2.021 3.237-.061 3.492-1.721 7.09-4.766 7.214Z"></path></svg></span></div></div></div></div></footer></div><!--$--><!--/$--></section><div aria-hidden="true" class="blurMagic-module__nGfQBW__root left-1/2! z-20 h-[120px]! w-full! max-w-[inherit]! -translate-x-1/2!" data-side="bottom" style="--background:var(--color-background)"></div><nav aria-label="Floating Navigation" class="fixed bottom-5 left-1/2 z-50 flex w-fit max-w-[calc(100vw-2rem)] -translate-x-1/2 flex-row items-center justify-center whitespace-nowrap rounded-full border bg-background/70 px-1 py-1 text-foreground bg-blend-luminosity shadow-xs backdrop-blur-xl transition"><div class="flex items-center gap-0.5"><button aria-label="Enable interface sounds" aria-pressed="false" class="float-trigger grid h-11! w-11! cursor-pointer place-items-center p-0!" type="button"><svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M11 5 6 9H3v6h3l5 4V5Z" fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="2"></path><path d="m16 9 5 6m0-6-5 6" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path></svg></button><button aria-expanded="false" aria-label="Open theme settings" class="float-trigger grid h-11! w-11! cursor-pointer place-items-center p-0!" type="button"><span aria-hidden="true" class="relative size-[1.35rem] overflow-hidden rounded-[7px] border-[2.5px]" style="border-color:oklch(0.72 0.2 352.53)"><span class="absolute inset-y-0 left-0 w-1/2 bg-zinc-950"></span><span class="absolute inset-y-0 right-0 w-1/2 bg-zinc-100"></span></span></button><div aria-hidden="true" class="mx-1 h-5 w-px bg-border"></div><div class="relative"><button aria-label="Package manager: pnpm" class="float-trigger grid h-11! w-11! cursor-pointer place-items-center p-0!" type="button"><svg class="size-3.5" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v85h85V0H0Zm93.5 0v85h85V0h-85Zm93.5 0v85h85V0h-85ZM93.5 93.5v85h85v-85h-85Zm93.5 0v85h85v-85h-85ZM0 187v85h85v-85H0Zm93.5 0v85h85v-85h-85Zm93.5 0v85h85v-85h-85Z" fill="#f9ad00"></path></svg></button></div><button aria-label="Open install bundle (0 selected)" class="float-trigger relative grid h-11! w-11! cursor-pointer place-items-center p-0!" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package" aria-hidden="true"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><path d="m7.5 4.27 9 5.15"></path></svg></button><span aria-atomic="true" aria-live="polite" class="sr-only"></span></div></nav></main></div>
150<script>requestAnimationFrame(function(){$RT=performance.now()});</script>
150<script src="/_next/static/immutable/chunks/0exwcf11x5si5.js" id="_R_" async=""></script>
150<div hidden id="S:0"><section class="relative bg-background px-8 py-24 transition"><div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><div class="max-w-2xl mx-auto text-center"><h2 class="text-balance font-semibold font-title text-3xl text-foreground transition md:text-4xl text-center" style="opacity:0;transform:translateY(10px)">Components showcase</h2><p class="mt-4 text-balance text-primary-foreground transition text-center" style="opacity:0;transform:translateY(10px)">Real components from the registry — preview the motion, then install with one command.</p></div><div class="mt-16 columns-1 gap-4 md:columns-2 lg:columns-3"><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="dynamic-island"><figure aria-label="Preview of Dynamic Island" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Dynamic Island documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/dynamic-island"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="number-flow"><figure aria-label="Preview of Number Flow" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Number Flow documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/number-flow"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="phototab"><figure aria-label="Preview of Phototab" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Phototab documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/phototab"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewB
150ox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="social-selector"><figure aria-label="Preview of Social Selector" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Social Selector documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/social-selector"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="user-account-avatar"><figure aria-label="Preview of User Account Avatar" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View User Account Avatar documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/user-account-avatar"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="scrollable-card-stack"><figure aria-label="Preview of Scrollable Card Stack" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Scrollable Card Stack documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/scrollable-card-stack"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="checkbox"><figure aria-label="Preview of Checkbox" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground
150/20 border-t-primary"></div></div></div></figure><a aria-label="View Checkbox documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/checkbox"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="animated-tags"><figure aria-label="Preview of Animated Tags" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Animated Tags documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/animated-tags"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="image-metadata-preview"><figure aria-label="Preview of Image Metadata Preview" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Image Metadata Preview documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/image-metadata-preview"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="animated-tabs"><figure aria-label="Preview of Animated Tabs" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Animated Tabs documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/
150animated-tabs"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="animated-toggle"><figure aria-label="Preview of Animated Toggle" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Animated Toggle documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/animated-toggle"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div><div class="group relative mb-4 break-inside-avoid rounded-xl border border-border bg-card focus-within:z-20 hover:z-20" data-showcase="exposure-slider"><figure aria-label="Preview of Exposure Slider" class="[&amp;_[role=tablist]]:!translate-y-0 relative m-0 min-h-72 w-full rounded-xl bg-primary px-4 py-6"><div class="flex min-h-60 w-full items-center justify-center"><div class="flex h-full items-center justify-center"><div class="h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-primary"></div></div></div></figure><a aria-label="View Exposure Slider documentation" class="absolute top-2 right-2 z-30 flex size-11 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-opacity hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:opacity-0 [@media(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100 [@media(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100" href="/docs/components/exposure-slider"><svg aria-hidden="true" class="size-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></svg></a></div></div><div class="mx-auto mt-8 flex justify-center"><a class="relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 h-11 gap-2 rounded-lg px-8 text-base [&amp;_svg]:size-5 border-[0.5px] border-white/25 bg-gradient-to-b from-[var(--btn,var(--color-brand))] to-[var(--btn-hover,var(--color-brand-secondary))] text-[var(--btn-fg,#fff)] text-shadow-sm shadow-black/20 shadow-md ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--btn,var(--color-brand)))] hover:from-[var(--btn-hover,var(--color-brand-secondary))] hover:to-[var(--btn-hover,var(--color-brand-secondary))] [&amp;_svg]:drop-shadow-sm" href="/docs/components"><span class="flex items-center gap-1"><span>View all components</span></span><svg aria-hidden="true" class="-mx-1.5 size-5 shrink-0 text-white/72" fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.333 13.333 11.667 10 8.333 6.667" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"></path></svg></a></div></section></div>
150<script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0};
151$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script>
151<div hidden id="S:1"><section class="relative w-full bg-background px-8 py-24"><div class="absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div><div class="mx-auto w-full max-w-7xl"><div class="mb-12 flex flex-col items-center gap-6 text-center"><div class="max-w-2xl"><h2 class="text-balance font-semibold font-title text-3xl text-foreground" style="opacity:0;transform:translateY(12px)">What they say about us</h2><p class="mt-4 text-foreground/70 text-lg" style="opacity:0;transform:translateY(12px)">See what developers and designers are saying about SmoothUI.</p></div><div class="flex shrink-0 items-center gap-2"><button aria-label="Previous testimonials" class="flex size-10 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:bg-primary" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="size-4"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.0001 1.58576L5.58588 12L16.0001 22.4142L17.4143 21L8.41431 12L17.4143 2.99997L16.0001 1.58576Z" fill="currentColor"></path></svg></button><button aria-label="Next testimonials" class="flex size-10 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:bg-primary" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="size-4"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99991 1.58576L18.4141 12L7.99991 22.4142L6.58569 21L15.5857 12L6.58569 2.99997L7.99991 1.58576Z" fill="currentColor"></path></svg></button></div></div><div class="hidden items-stretch justify-center gap-3 md:flex"><div class="flex w-[210px] flex-col gap-3"><div class="relative min-h-0 overflow-hidden rounded-2xl w-full flex-[1.7]"><div class="absolute inset-0" style="opacity:1"><a class="flex h-full flex-col justify-between rounded-2xl border bg-primary/40 p-4 transition-colors hover:bg-primary" href="https://x.com/Lucas_Moveset/status/1990155654019887348" rel="noopener noreferrer" target="_blank"><p class="text-balance text-foreground/90 text-sm leading-relaxed line-clamp-4">Great resource! UI libraries like SmoothUI simplify your workflow and boost your design aesthetic.</p><div class="mt-3 flex items-center gap-2"><img alt="Lucas" draggable="false" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="shrink-0 rounded-full object-cover" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FLucas_Moveset&amp;w=32&amp;q=75 1x, /_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FLucas_Moveset&amp;w=64&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FLucas_Moveset&amp;w=64&amp;q=75"/><div class="leading-tight"><div class="font-medium text-foreground text-xs">Lucas</div><div class="text-[11px] text-muted-foreground">@Lucas_Moveset</div></div></div></a></div></div><div class="relative min-h-0 overflow-hidden rounded-2xl aspect-square flex-1 self-end"><div class="absolute inset-0 rounded-2xl bg-smooth-200/60" style="opacity:1"></div></div></div><div class="h-80 w-[360px] shrink-0"><div class="relative size-full"><div class="absolute inset-0" style="opacity:1"><a class="relative flex h-full flex-col justify-end overflow-hidden rounded-2xl p-6 text-white transition-[filter] hover:brightness-105" href="https://x.com/orcdev/status/2007091382784303330" rel="noopener noreferrer" target="_blank"><img alt="" aria-hidden="true" draggable="false" data-landing-background="testimonials" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://ik.imagekit.io/16u211libb/smoothui/scenes/violet-tangerine.webp?tr=w-800,f-auto"/><div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/55 via-black/15 to-black/5"></div><p class="relative text-balance font-medium text-lg leading-snug drop-shadow-sm">Love your project Edu! Keep it up — can&#x27;t wait to see what you cook next 🔥</p><div class="relative mt-5 flex items-center gap-2.5"><img alt="OrcDev" draggable="false" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="shrink-0 rounded-full object-cover" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2Forcdev&amp;w=32&amp;q=75 1x, /_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2Forcdev&amp;w=64&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2Forcdev&amp;w=64&amp;q=75"/><div class="leading-tight"><div class="font-medium text-sm">OrcDev</div><div class="text-sm opacity-80">@orcdev</div></div></div></a></div></div></div><div class="flex w-[210px] flex-col gap-3"><div class="relative min-h-0 overflow-hidden rounded-2xl aspect-square flex-1 self-start"><div class="absolute inset-0 rounded-2xl bg-smooth-200/60" style="opacity:1"></div></div><div class="relative min-h-0 overflow-hidden rounded-2xl w-full flex-[1.7]"><div class="absolute inset-0" style="opacity:1"><a class="flex h-full flex-col justify-between rounded-2xl border bg-primary/40 p-4 transition-colors hover:bg-primary" href="https://x.com/PeteCapeCod/status/1962707094395556337" rel="noopener noreferrer" target="_blank">
151<p class="text-balance text-foreground/90 text-sm leading-relaxed line-clamp-4">Checked out SmoothUI — some great stuff! 👏 Great job 👍</p><div class="mt-3 flex items-center gap-2"><img alt="Peter Cruckshank" draggable="false" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="shrink-0 rounded-full object-cover" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FPeteCapeCod&amp;w=32&amp;q=75 1x, /_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FPeteCapeCod&amp;w=64&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FPeteCapeCod&amp;w=64&amp;q=75"/><div class="leading-tight"><div class="font-medium text-foreground text-xs">Peter Cruckshank</div><div class="text-[11px] text-muted-foreground">@PeteCapeCod</div></div></div></a></div></div></div></div><div class="md:hidden"><div class="flex flex-col gap-4" style="opacity:1"><div class="h-72"><a class="relative flex h-full flex-col justify-end overflow-hidden rounded-2xl p-6 text-white transition-[filter] hover:brightness-105" href="https://x.com/orcdev/status/2007091382784303330" rel="noopener noreferrer" target="_blank"><img alt="" aria-hidden="true" draggable="false" data-landing-background="testimonials" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://ik.imagekit.io/16u211libb/smoothui/scenes/violet-tangerine.webp?tr=w-800,f-auto"/><div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/55 via-black/15 to-black/5"></div><p class="relative text-balance font-medium text-lg leading-snug drop-shadow-sm">Love your project Edu! Keep it up — can&#x27;t wait to see what you cook next 🔥</p><div class="relative mt-5 flex items-center gap-2.5"><img alt="OrcDev" draggable="false" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="shrink-0 rounded-full object-cover" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2Forcdev&amp;w=32&amp;q=75 1x, /_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2Forcdev&amp;w=64&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2Forcdev&amp;w=64&amp;q=75"/><div class="leading-tight"><div class="font-medium text-sm">OrcDev</div><div class="text-sm opacity-80">@orcdev</div></div></div></a></div><a class="flex h-full flex-col justify-between rounded-2xl border bg-primary/40 p-4 transition-colors hover:bg-primary" href="https://x.com/Lucas_Moveset/status/1990155654019887348" rel="noopener noreferrer" target="_blank"><p class="text-balance text-foreground/90 text-sm leading-relaxed">Great resource! UI libraries like SmoothUI simplify your workflow and boost your design aesthetic.</p><div class="mt-3 flex items-center gap-2"><img alt="Lucas" draggable="false" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="shrink-0 rounded-full object-cover" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FLucas_Moveset&amp;w=32&amp;q=75 1x, /_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FLucas_Moveset&amp;w=64&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FLucas_Moveset&amp;w=64&amp;q=75"/><div class="leading-tight"><div class="font-medium text-foreground text-xs">Lucas</div><div class="text-[11px] text-muted-foreground">@Lucas_Moveset</div></div></div></a><a class="flex h-full flex-col justify-between rounded-2xl border bg-primary/40 p-4 transition-colors hover:bg-primary" href="https://x.com/PeteCapeCod/status/1962707094395556337" rel="noopener noreferrer" target="_blank"><p class="text-balance text-foreground/90 text-sm leading-relaxed">Checked out SmoothUI — some great stuff! 👏 Great job 👍</p><div class="mt-3 flex items-center gap-2"><img alt="Peter Cruckshank" draggable="false" loading="lazy" width="28" height="28" decoding="async" data-nimg="1" class="shrink-0 rounded-full object-cover" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FPeteCapeCod&amp;w=32&amp;q=75 1x, /_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FPeteCapeCod&amp;w=64&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Funavatar.io%2Fx%2FPeteCapeCod&amp;w=64&amp;q=75"/><div class="leading-tight"><div class="font-medium text-foreground text-xs">Peter Cruckshank</div><div class="text-[11px] text-muted-foreground">@PeteCapeCod</div></div></div></a></div></div></div></section></div>
151<script>$RC("B:1","S:1")</script>
151<div hidden id="S:2"><section class="relative bg-background px-8 py-24 transition"><div class="max-w-2xl mx-auto text-center"><h2 class="text-balance font-semibold font-title text-3xl text-foreground transition md:text-4xl text-center" style="opacity:0;transform:translateY(10px)">From the blog</h2><p class="mt-4 text-balance text-primary-foreground transition text-center" style="opacity:0;transform:translateY(10px)">Tutorials, deep dives and case studies on building beautifully animated React components.</p></div><div class="mx-auto mt-16 grid w-full max-w-7xl gap-4 md:grid-cols-3"><article class="group relative"><a class="flex h-full flex-col overflow-hidden rounded-2xl border bg-primary/40 transition-colors hover:bg-primary" href="/blog/ai-design-slop"><div class="relative overflow-hidden aspect-video border-border border-b"><img alt="Amber and violet abstract color fields" draggable="false" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-center" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 400px" srcSet="/_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Famber-violet.webp&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Famber-violet.webp&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Famber-violet.webp&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Famber-violet.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Famber-violet.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Famber-violet.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Famber-violet.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Famber-violet.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Famber-violet.webp&amp;w=3840&amp;q=75"/><div aria-hidden="true" class="pointer-events-none absolute inset-0 flex items-center justify-center p-[7%] [container-type:inline-size]" data-blog-cover="audit"><svg aria-hidden="true" class="pointer-events-none absolute inset-0 size-full opacity-[0.22] dark:opacity-[0.18]" data-artwork-pattern="squares" focusable="false" style="mask-image:linear-gradient(to bottom, transparent 10%, #000 52%, #0009 100%)"><defs><pattern height="12" id="_R_6bcltpfl5b_" patternUnits="userSpaceOnUse" width="12"><rect fill="white" height="1.5" width="1.5" x="5.25" y="5.25"></rect></pattern></defs><rect fill="url(#_R_6bcltpfl5b_)" height="100%" width="100%"></rect></svg><div class="relative flex h-full w-full flex-col items-center justify-center rounded-[5cqw] border border-white/70 bg-white/75 px-[5%] py-[4%] text-center text-[#29272c] shadow-[0_12px_40px_#20102a18] backdrop-blur-md"><span class="font-mono text-[#514c58] text-[clamp(7px,1.8cqw,12px)] uppercase tracking-[0.18em]">SmoothUI Journal</span><div class="min-h-0 w-[74%] flex-1 [&amp;&gt;svg]:h-full [&amp;&gt;svg]:w-full"><svg aria-hidden="true" focusable="false" height="180" viewBox="0 0 320 180" width="320" xmlns="http://www.w3.org/2000/svg"><g opacity="0.45"><rect fill="#ffffff" height="105" rx="12" stroke="#d8d5dc" width="104" x="27" y="34"></rect><path d="M44 57h70M44 76h70M44 95h70M44 114h70" stroke="#a3a0a8" stroke-width="5"></path></g><path d="m146 82 10 9-10 9" fill="none" stroke="#4b5563" stroke-width="3"></path><rect fill="#ffffff" height="128" rx="12" stroke="#d8d5dc" width="112" x="180" y="22"></rect><rect fill="#e5e7eb" height="40" rx="7" width="84" x="194" y="36"></rect><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4b5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true" x="221" y="41"><path d="M20 6 9 17l-5-5"></path></svg><path d="M196 94h65M196 107h78M196 120h46" stroke="#29272c" stroke-linecap="round" stroke-width="4"></path></svg></div><span class="text-balance font-semibold text-[clamp(13px,4cqw,36px)] leading-tight tracking-tight">Beyond design slop</span><span class="mt-[2%] text-[#514c58] text-[clamp(8px,2cqw,16px)]">Review · refine · repeat</span></div></div></div><div class="flex flex-1 flex-col p-6"><div class="flex items-center gap-2 text-muted-foreground text-sm"><time dateTime="2026-06-24">June 24, 2026</time><span aria-hidden="true">·</span><span>4<!-- --> min read</span></div><h3 class="mt-3 font-semibold text-foreground tracking-tight transition-colors group-hover:text-brand">AI Design Slop: Why AI-Generated UI Looks Generic — and the Fix</h3><p class="mt-2 line-clamp-3 text-muted-foreground text-sm leading-relaxed">AI coding agents ship the same purple gradients, glassmorphism, and identical card grids. Here&#x27;s why AI-generated UI looks like slop — and how a closed-loop design-quality bar fixes it for good.</p><span class="mt-auto flex items-center gap-1 pt-6 font-medium text-brand text-sm">Read<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true" class="size-3.5 translate-y-
151px transition-transform group-hover:translate-x-0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99991 1.58576L18.4141 12L7.99991 22.4142L6.58569 21L15.5857 12L6.58569 2.99997L7.99991 1.58576Z" fill="currentColor"></path></svg></span></div></a></article><article class="group relative"><a class="flex h-full flex-col overflow-hidden rounded-2xl border bg-primary/40 transition-colors hover:bg-primary" href="/blog/best-react-animation-libraries"><div class="relative overflow-hidden aspect-video border-border border-b"><img alt="Cobalt blue and pink abstract color fields" draggable="false" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-center" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 400px" srcSet="/_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fcobalt-pink.webp&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fcobalt-pink.webp&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fcobalt-pink.webp&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fcobalt-pink.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fcobalt-pink.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fcobalt-pink.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fcobalt-pink.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fcobalt-pink.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fcobalt-pink.webp&amp;w=3840&amp;q=75"/><div aria-hidden="true" class="pointer-events-none absolute inset-0 flex items-center justify-center p-[7%] [container-type:inline-size]" data-blog-cover="libraries"><div class="relative flex h-full w-full flex-col items-center justify-center rounded-[5cqw] border border-white/70 bg-white/75 px-[5%] py-[4%] text-center text-[#29272c] shadow-[0_12px_40px_#20102a18] backdrop-blur-md"><span class="font-mono text-[#514c58] text-[clamp(7px,1.8cqw,12px)] uppercase tracking-[0.18em]">SmoothUI Journal</span><div class="min-h-0 w-[74%] flex-1 [&amp;&gt;svg]:h-full [&amp;&gt;svg]:w-full"><svg aria-hidden="true" focusable="false" height="180" viewBox="0 0 320 180" width="320" xmlns="http://www.w3.org/2000/svg"><rect fill="#ffffff" height="62" rx="12" stroke="#d8d5dc" width="84" x="18" y="45"></rect><rect fill="#ffffff" height="104" rx="12" stroke="#d8d5dc" width="84" x="118" y="25"></rect><rect fill="#ffffff" height="62" rx="12" stroke="#d8d5dc" width="84" x="218" y="45"></rect><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#a3a0a8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers" aria-hidden="true" x="44" y="62"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#4b5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles" aria-hidden="true" x="143" y="46"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#a3a0a8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml" aria-hidden="true" x="244" y="62"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg><path d="M138 98h44M140 110h40" stroke="#4b5563" stroke-linecap="round" stroke-width="4"></path></svg></div><span class="text-balance font-semibold text-[clamp(13px,4cqw,36px)] leading-tight tracking-tight">Choose your motion</span><span class="mt-[2%] text-[#514c58] text-[clamp(8px,2cqw,16px)]">A React library field guide</span></div></div></div><div class="flex flex-1 flex-col p-6"><div class="flex items-center gap-2 text-muted-foreground text-sm"><time dateTime="2026-04-16">April 16, 2026</time><span aria-hidden="true">·</span><span>7<!-- --> min read</span></div><h3 class="mt-3 font-semibold text-foreground tracking-tight transition-colors group-hover:text-brand">Best React Animation Libraries in 2026: A Complete Comparison</h3><p class="mt-2 line-clamp-3 text-muted-foreground text-sm leading-relaxed">A detailed comparison of the top React animation libraries — Motion, React Spring, GSAP, SmoothUI, and more. Learn which library fits your project with real examples and performance benchmarks.</p><span class="mt-auto flex items-center gap-1 pt-6 font-medium text-brand text-sm">Read<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true" class="size-3.5 translate-y-
151px transition-transform group-hover:translate-x-0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99991 1.58576L18.4141 12L7.99991 22.4142L6.58569 21L15.5857 12L6.58569 2.99997L7.99991 1.58576Z" fill="currentColor"></path></svg></span></div></a></article><article class="group relative"><a class="flex h-full flex-col overflow-hidden rounded-2xl border bg-primary/40 transition-colors hover:bg-primary" href="/blog/framer-motion-tutorial"><div class="relative overflow-hidden aspect-video border-border border-b"><img alt="Sky blue and peach heavily blurred color fields with fine grain" draggable="false" loading="lazy" decoding="async" data-nimg="fill" class="object-cover object-center" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, 400px" srcSet="/_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fsky-peach.webp&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fsky-peach.webp&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fsky-peach.webp&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fsky-peach.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fsky-peach.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fsky-peach.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fsky-peach.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fsky-peach.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fik.imagekit.io%2F16u211libb%2Fsmoothui%2Fscenes%2Fsky-peach.webp&amp;w=3840&amp;q=75"/><div aria-hidden="true" class="pointer-events-none absolute inset-0 flex items-center justify-center p-[7%] [container-type:inline-size]" data-blog-cover="motion"><svg aria-hidden="true" class="pointer-events-none absolute inset-0 size-full opacity-[0.12] dark:opacity-[0.1]" data-artwork-pattern="contours" focusable="false" preserveAspectRatio="none" style="mask-image:radial-gradient(ellipse at 40% 62%, #000 15%, #0009 58%, transparent 100%)" viewBox="0 0 600 720"><defs><path d="M 0 -1 C .38 -1.08 .92 -.85 1 -.45 C 1.12 -.1 .7 .25 .8 .5 C .91 .8 .35 1 -.02 .88 C -.35 .72 -.35 .55 -.68 .62 C -1 .66 -1.08 .1 -.82 -.2 C -.62 -.5 -.5 -.95 0 -1 Z" id="_R_6fcltpfl5b_" vector-effect="non-scaling-stroke"></path></defs><g fill="none" stroke="white" stroke-width="0.45"><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(26.400000000000002 24)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(50.6 46)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(74.80000000000001 68)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(99.00000000000001 90)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(123.20000000000002 112)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(147.4 134)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(171.60000000000002 156)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(195.8 178)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(220.00000000000003 200)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(244.20000000000002 222)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(268.40000000000003 244)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(292.6 266)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(316.8 288)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(341 310)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(365.20000000000005 332)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(389.40000000000003 354)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(413.6 376)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(437.8 398)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(462.00000000000006 420)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(486.20000000000005 442)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(510.40000000000003 464)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(534.6 486)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(558.8000000000001 508)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(583 530)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(607.2 552)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(631.4000000000001 574)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(655.6 596)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(679.8000000000001 618)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(704 640)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(728.2 662)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(752.4000000000001 684)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(776.6 706)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(800.8000000000001 728)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(825.0000000000001 750)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(849.2 772)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(873.4000000000001 794)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(897.6 816)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(921.8000000000001 838)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(946.0000000000001 860)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(970.2 882)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(994.4000000000001 904)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(1018.6000000000001 926)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(1042.8000000000002 948)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(1067 970)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(1091.2 992)" vector-effect="non-scaling-stroke"></use><use href="#_R_6fcltpfl5b_" transform="translate(65 570) scale(1115.4 1014)" vector-effect="non-scaling-stroke"></use></g></svg><div class="relative flex h-full w-full flex-col items-center justify-center rounded-[5cqw] border border-white/70 bg-white/75 px-[5%] py-[4%] text-center text-[#29272c] shadow-[0_12px_40px_#20102a18] backdrop-blur-md"><span class="font-mono text-[#514c58] text-[clamp(7px,1.8cqw,12px)] uppercase tracking-[0.18em]">
151SmoothUI Journal</span><div class="min-h-0 w-[74%] flex-1 [&amp;&gt;svg]:h-full [&amp;&gt;svg]:w-full"><svg aria-hidden="true" focusable="false" height="180" viewBox="0 0 320 180" width="320" xmlns="http://www.w3.org/2000/svg"><path d="M38 125C90 125 98 40 160 40s62 85 122 85" fill="none" stroke="#cac5d0" stroke-width="3"></path><path d="M38 125C90 125 98 40 160 40" fill="none" stroke="#4b5563" stroke-width="4"></path><rect fill="#ffffff" height="30" rx="8" stroke="#a3a0a8" width="30" x="23" y="110"></rect><rect fill="#4b5563" height="38" rx="11" transform="rotate(15 160 40)" width="38" x="141" y="21"></rect><rect fill="#ffffff" height="30" rx="8" stroke="#a3a0a8" width="30" x="267" y="110"></rect><path d="M53 157h211" stroke="#a3a0a8" stroke-dasharray="3 8"></path></svg></div><span class="text-balance font-semibold text-[clamp(13px,4cqw,36px)] leading-tight tracking-tight">From state to motion</span><span class="mt-[2%] text-[#514c58] text-[clamp(8px,2cqw,16px)]">Transitions · gestures · layout</span></div></div></div><div class="flex flex-1 flex-col p-6"><div class="flex items-center gap-2 text-muted-foreground text-sm"><time dateTime="2026-04-16">April 16, 2026</time><span aria-hidden="true">·</span><span>8<!-- --> min read</span></div><h3 class="mt-3 font-semibold text-foreground tracking-tight transition-colors group-hover:text-brand">Framer Motion Tutorial: Build Stunning React Animations in 2026</h3><p class="mt-2 line-clamp-3 text-muted-foreground text-sm leading-relaxed">Learn how to use Motion (formerly Framer Motion) to build smooth, accessible animations in React. From basic transitions to spring physics, gestures, and layout animations — with real examples.</p><span class="mt-auto flex items-center gap-1 pt-6 font-medium text-brand text-sm">Read<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true" class="size-3.5 translate-y-px transition-transform group-hover:translate-x-0.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99991 1.58576L18.4141 12L7.99991 22.4142L6.58569 21L15.5857 12L6.58569 2.99997L7.99991 1.58576Z" fill="currentColor"></path></svg></span></div></a></article></div><div class="mx-auto mt-8 flex justify-center"><a class="relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap font-medium outline-none ring-offset-background transition-[transform,background-color,border-color,color,box-shadow] duration-150 ease-out focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 h-11 gap-2 rounded-lg px-8 text-base [&amp;_svg]:size-5 border-[0.5px] border-white/25 bg-gradient-to-b from-[var(--btn,var(--color-brand))] to-[var(--btn-hover,var(--color-brand-secondary))] text-[var(--btn-fg,#fff)] text-shadow-sm shadow-black/20 shadow-md ring-1 ring-[color-mix(in_oklab,var(--color-foreground)_15%,var(--btn,var(--color-brand)))] hover:from-[var(--btn-hover,var(--color-brand-secondary))] hover:to-[var(--btn-hover,var(--color-brand-secondary))] [&amp;_svg]:drop-shadow-sm" href="/blog"><span class="flex items-center gap-1"><span>View all posts</span></span><svg aria-hidden="true" class="-mx-1.5 size-5 shrink-0 text-white/72" fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.333 13.333 11.667 10 8.333 6.667" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"></path></svg></a></div></section></div>
151<script>$RC("B:2","S:2")</script>
151<script>(self.__next_f=self.__next_f||[]).push([0])</script>
151<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[902504,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"ActivityBeacon\"]\n4:I[325571,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"Analytics\"]\n5:I[171630,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"SpeedInsights\"]\n6:I[256105,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"RootProvider\"]\n7:I[207075,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"SoundProvider\"]\n8:I[476259,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"KitProvider\"]\n9:I[764990,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"default\"]\na:I[362078,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"default\"]\nb:I[502568,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/23jhuizbf5gl1.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\"],\"default\"]\nf:I[746240,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"default\",1]\n:HL[\"/_next/static/immutable/chunks/28w_e5c0532dc.css\",\"style\"]\n:HL[\"/_next/static/immutable/chunks/0mirzputltyvm.css\",\"style\"]\n:HL[\"/_next/static/immutable/chunks/39nzggqwre9pv.css\",\"style\"]\n:HL[\"/_next/static/immutable/chunks/0hqlat9oplp2u.css\",\"style\"]\n:HL[\"/_next/static/immutable/media/47fe1b7cd6e6ed85-s.p.1n2oi-d4a-xww.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/4b766aa38fdaaae3-s.p.139ucknmlxzq9.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/829ba4228c966254-s.p.0zvxjg5nywxta.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/83afe278b6a6bb3c-s.p.45535valc9rzk.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/8e6fa89aa22d24ec-s.p.1bg6trwi21i5q.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/a218039a3287bcfd-s.p.17e3l4txdrufi.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/e2334d715941921e-s.p.2g9xiodaln20i.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/fba5a26ea33df6a3-s.p.08ssgmy_tb90r.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/chunks/3dhnnn6j4cw5_.css\",\"style\"]\n2:T6dc,{\"@context\":\"https://schema.org\",\"@graph\":[{\"@id\":\"https://smoothui.dev/#organization\",\"@type\":\"Organization\",\"description\":\"Beautiful animated React components with smooth Motion and GSAP animations. Drop-in shadcn/ui compatible, fully customizable. 198 free components with Tailwind CSS for modern UIs.\",\"founder\":{\"@type\":\"Person\",\"name\":\"Eduardo Calvo\",\"sameAs\":[\"https://twitter.com/educalvolpz\"]},\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://smoothui.dev/logo-smoothui.svg\"},\"name\":\"SmoothUI\",\"sameAs\":[\"https://twitter.com/educalvolpz\",\"https://github.com/educlopez/smoothui\"],\"url\":\"https://smoothui.dev\"},{\"@id\":\"https://smoothui.dev/#software\",\"@type\":\"SoftwareApplication\",\"applicationCategory\":\"DeveloperApplication\",\"author\":{\"@id\":\"https://smoothui.dev/#organization\"}
151,\"description\":\"A React component library featuring 198 animated UI components with smooth Motion and GSAP animations. Compatible with shadcn/ui, built with Tailwind CSS v4 and TypeScript.\",\"keywords\":[\"react components\",\"tailwindcss ui\",\"motion animations\",\"framer motion\",\"gsap animations\",\"shadcn/ui\",\"shadcn ui components\",\"shadcn alternative\",\"react ui library\",\"animated ui components\",\"dark mode components\"],\"name\":\"SmoothUI\",\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\"},\"operatingSystem\":\"Any\",\"programmingLanguage\":[\"TypeScript\",\"JavaScript\"],\"runtimePlatform\":\"React\",\"url\":\"https://smoothui.dev\"},{\"@id\":\"https://smoothui.dev/#website\",\"@type\":\"WebSite\",\"name\":\"SmoothUI\",\"potentialAction\":{\"@type\":\"SearchAction\",\"query-input\":\"required name=search_term\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://smoothui.dev/docs/components?q={search_term}\"}},\"publisher\":{\"@id\":\"https://smoothui.dev/#organization\"},\"url\":\"https://smoothui.dev\"}]}0:{\"P\":null,\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(home)\",{\"children\":[\"__PAGE__\",{},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4608]},\"$undefined\",\"$undefined\",4624],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/28w_e5c0532dc.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0mirzputltyvm.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"className\":\"inter_3ca9ce85-module__684ZOa__className inter_3ca9ce85-module__684ZOa__variable poppins_212a496b-module__4qE9iq__variable plus_jakarta_sans_791e04b5-module__JL4tZa__variable\",\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"content\":\"SmoothUI\",\"name\":\"apple-mobile-web-app-title\"}],[\"$\",\"link\",null,{\"href\":\"/blog/rss.xml\",\"rel\":\"alternate\",\"title\":\"SmoothUI Blog\",\"type\":\"application/rss+xml\"}],[\"$\",\"link\",null,{\"href\":\"/llms.txt\",\"rel\":\"alternate\",\"type\":\"text/plain\"}],[\"$\",\"link\",null,{\"href\":\"/llms-full.txt\",\"rel\":\"alternate\",\"type\":\"text/plain\"}],[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$2\"},\"id\":\"smoothui-schema\",\"type\":\"application/ld+json\"}]]}],[\"$\",\"body\",null,{\"className\":\"flex min-h-screen flex-col\",\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{}],[\"$\",\"$L6\",null,{\"children\":[\"$\",\"$L7\",null,{\"children\":[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$Lb\",null,{}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/39nzggqwre9pv.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0hqlat9oplp2u.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]}]]}]]}]]}],{\"children\":[\"$Lc\",{\"children\":[\"$Ld\",{},null,false,null]},null,false,null]},null,false,null],\"$Le\",false]],\"m\":\"$undefined\",\"G\":[\"$f\",[\"$L10\",\"$L11\"]],\"S\":true,\"h\":null,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\"}\n12:I[172394,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\"],\"default\"]\n13:I[66694,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\"],\"FloatNav\"]\n14:I[691288,[\"/_
151next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"Hero\"]\n15:I[355580,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"GithubStars\"]\n16:I[25875,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"ExploreSections\"]\n17:\"$Sreact.suspense\"\n18:I[561757,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"ComponentsSlideshow\"]\n19:I[343051,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"Features\"]\n1a:I[810352,[\"/_
151next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"BlockCategories\"]\n1b:I[284980,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"AISection\"]\n1c:I[80302,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"SkillsSection\"]\n1d:I[420319,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"WhatTheySay\"]\n2b:I[112343,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"ViewportBoundary\"]\n2d:I[112343,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"MetadataBoundary\"]\nc:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/39nzggqwre9pv.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0hqlat9oplp2u.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"async\":true,\"nonce\":\"$undefined\"}
151],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-7\",{\"src\":\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"div\",null,{\"className\":\"relative isolate bg-background transition\",\"children\":[\"$\",\"main\",null,{\"className\":\"relative min-h-screen w-full overflow-y-auto\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":true,\"className\":\"blurMagic-module__nGfQBW__root left-1/2! z-20 h-[120px]! w-full! max-w-[inherit]! -translate-x-1/2!\",\"data-side\":\"top\",\"ref\":\"$undefined\",\"style\":{\"--background\":\"var(--color-background)\",\"--blur\":\"4px\",\"--height\":\"$undefined\",\"--stop\":\"50%\"}}],[\"$\",\"$L12\",null,{\"className\":\"mx-auto max-w-7xl\"}],[\"$\",\"section\",null,{\"className\":\"flex flex-col overflow-hidden\",\"children\":[\"$\",\"$L9\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$La\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$Lb\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"div\",null,{\"aria-hidden\":true,\"className\":\"blurMagic-module__nGfQBW__root left-1/2! z-20 h-[120px]! w-full! max-w-[inherit]! -translate-x-1/2!\",\"data-side\":\"bottom\",\"ref\":\"$undefined\",\"style\":{\"--background\":\"var(--color-background)\",\"--blur\":\"$undefined\",\"--height\":\"$undefined\",\"--stop\":\"$undefined\"}}],[\"$\",\"$L13\",null,{}]]}]}]]}]\nd:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"div\",null,{\"className\":\"w-full bg-background\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full max-w-7xl [\u0026\u003esection]:bg-transparent\",\"children\":[[\"$\",\"$L14\",null,{}],[\"$\",\"section\",null,{\"className\":\"bg-background px-8 py-8 transition\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto flex max-w-7xl flex-col items-center justify-center gap-4 sm:flex-row sm:gap-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex -space-x-2\",\"children\":[[\"$\",\"img\",\"orcdev\",{\"alt\":\"\",\"aria-hidden\":true,\"className\":\"size-7 rounded-full border-2 border-background object-cover\",\"draggable\":false,\"height\":28,\"loading\":\"lazy\",\"src\":\"https://unavatar.io/x/orcdev\",\"width\":28}],[\"$\",\"img\",\"jaykosai\",{\"alt\":\"\",\"aria-hidden\":true,\"className\":\"size-7 rounded-full border-2 border-background object-cover\",\"draggable\":false,\"height\":28,\"loading\":\"lazy\",\"src\":\"https://unavatar.io/x/jaykosai\",\"width\":28}],[\"$\",\"img\",\"Lucas_Moveset\",{\"alt\":\"\",\"aria-hidden\":true,\"className\":\"size-7 rounded-full border-2 border-background object-cover\",\"draggable\":false,\"height\":28,\"loading\":\"lazy\",\"src\":\"https://unavatar.io/x/Lucas_Moveset\",\"width\":28}],[\"$\",\"img\",\"Potato___Dragon\",{\"alt\":\"\",\"aria-hidden\":true,\"className\":\"size-7 rounded-full border-2 border-background object-cover\",\"draggable\":false,\"height\":28,\"loading\":\"lazy\",\"src\":\"https://unavatar.io/x/Potato___Dragon\",\"width\":28}],[\"$\",\"img\",\"openhunts\",{\"alt\":\"\",\"aria-hidden\":true,\"className\":\"size-7 rounded-full border-2 border-background object-cover\",\"draggable\":false,\"height\":28,\"loading\":\"lazy\",\"src\":\"https://unavatar.io/x/openhunts\",\"width\":28}],[\"$\",\"img\",\"PeteCapeCod\",{\"alt\":\"\",\"aria-hidden\":true,\"className\":\"size-7 rounded-full border-2 border-background object-cover\",\"draggable\":false,\"height\"
151:28,\"loading\":\"lazy\",\"src\":\"https://unavatar.io/x/PeteCapeCod\",\"width\":28}]]}],[\"$\",\"span\",null,{\"className\":\"text-muted-foreground text-sm\",\"children\":\"Loved by developers building with shadcn/ui\"}]]}],[\"$\",\"span\",null,{\"aria-hidden\":true,\"className\":\"hidden h-4 w-px bg-border sm:block\"}],[\"$\",\"$L15\",null,{}]]}]}],[\"$\",\"$L16\",null,{}],[\"$\",\"$17\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"flex w-full animate-pulse items-center justify-center bg-background\",\"style\":{\"minHeight\":\"600px\"},\"children\":[\"$\",\"div\",null,{\"className\":\"h-8 w-32 rounded-md bg-muted\"}]}],\"children\":[\"$\",\"$L18\",null,{}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"w-full bg-primary\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full max-w-7xl [\u0026\u003esection]:bg-transparent\",\"children\":[\"$\",\"$L19\",null,{}]}]}],[\"$\",\"div\",null,{\"className\":\"w-full bg-background\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full max-w-7xl [\u0026\u003esection]:bg-transparent\",\"children\":[[\"$\",\"$L1a\",null,{}],[\"$\",\"$L1b\",null,{}],[\"$\",\"$L1c\",null,{}]]}]}],[\"$\",\"div\",null,{\"className\":\"w-full bg-primary\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full max-w-7xl [\u0026\u003esection]:bg-transparent\",\"children\":[\"$\",\"$17\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"flex w-full animate-pulse items-center justify-center bg-background\",\"style\":{\"minHeight\":\"700px\"},\"children\":[\"$\",\"div\",null,{\"className\":\"h-8 w-32 rounded-md bg-muted\"}]}],\"children\":[\"$\",\"$L1d\",null,{}]}]}]}],[\"$\",\"div\",null,{\"className\":\"w-full bg-background\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full max-w-7xl [\u0026\u003esection]:bg-transparent\",\"children\":[[\"$\",\"section\",null,{\"className\":\"relative bg-background px-8 py-20 transition\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute z-1 right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-border to-transparent\"}],[\"$\",\"div\",null,{\"className\":\"mx-auto w-full max-w-7xl text-center\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"font-medium text-[11px] text-muted-foreground uppercase tracking-[0.18em]\",\"children\":\"Featured across the community\"}],[\"$\",\"blockquote\",null,{\"className\":\"mx-auto mt-5 max-w-3xl text-balance font-semibold font-title text-foreground text-xl tracking-tight md:text-2xl\",\"children\":\"“SmoothUI is a game-changer for frontend developers looking for polished UI components with motion-powered interactivity.”\"}],[\"$\",\"a\",null,{\"className\":\"mt-3 inline-block text-muted-foreground text-sm transition-colors hover:text-brand\",\"href\":\"https://peerlist.io/saxenashikhil/articles/smoothui-a-beautiful-motiondriven-ui-library-for-react-devel\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":\"— Shikhil Saxena, Peerlist\"}],\"$L1e\"]}]]}],\"$L1f\"]}]}],\"$L20\",\"$L21\"],[\"$L22\",\"$L23\",\"$L24\",\"$L25\",\"$L26\",\"$L27\",\"$L28\",\"$L29\"],\"$L2a\"]}]\ne:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L2b\",null,{\"children\":\"$L2c\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L2d\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L2e\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n10:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/28w_e5c0532dc.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n11:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0mirzputltyvm.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n2f:I[7146,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"CoverageCarousel\"]\n30:I[914591,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"FAQ\"]\n32:I[42808,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"default\"]\n33:I[112343,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"OutletBoundary\"]\n1e:[\"$\",\"$L2f\",null,{\"items\":[{\"label\":\"Peerlist\",\"url\":\"https://peerlist.io/saxenashikhil/articles/smoothui-a-beautiful-motiondriven-ui-library-for-react-devel\",\"src\":\"/community-marks/peerlist.png\",\"wide\":true},{\"label\":\"DEV.to\",\"url\":\"https://dev.to/jqueryscript/smoothui-40-animated-react-components-with-motion-8e5\",\"src\":\"/community-marks/dev.png\"},{\"label\":\"Tailkits\",\"url\":\"https://tailkits.com/components/smoothui/\",\"src\":\"/community-marks/tailkits.svg\",\"wide\":true},{\"label\":\"All Shadcn\",\"url\":\"https://allshadcn.com/blocks/smoothui/\",\"src\":\"/community-marks/all-shadcn.png\"},{\"label\":\"Tailwind Resources\",\"url\":\"https://www.tailwindresources.com/theme/educlopez-smoothui/\",\"src\":\"/community-marks/tailwind-resources.svg\",\"wide\":true},{\"label\":\"Shadcn Templates\",\"url\":\"https://shadcntemplates.com/theme/educlopez-smoothui\",\"src\":\"/community-marks/shadcn-templates.svg\",\"wide\":true},{\"label\":\"Built At Lightspeed\",\"url\":\"https://www.builtatlightspeed.com/theme/educlopez-smoothui\",\"invert\":false,\"src\":\"/community-marks/builtatlightspeed.png\"}]}]\n1f:[\"$\",\"$L30\",null,{}]\n20:[\"$\",\"div\",null,{\"className\":\"w-full bg-background\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto w-full max-w-7xl [\u0026\u003esection]:bg-transparent\",\"children\":[\"$\",\"$17\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"flex w-full animate-pulse items-center justify-center bg-background\",\"style\":{\"minHeight\":\"500px\"},\"children\":[\"$\",\"div\",null,{\"className\":\"h-8 w-32 rounded-md bg-muted\"}]}],\"children\":\"$L31\"}]}]}]\n21:[\"$\",\"$L32\",null,{}]\n22:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/3dhnnn6j4cw5_.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n23:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n24:[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"async\":true,\"nonce\":\"$undefined\"}
151]\n25:[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n26:[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n27:[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n28:[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n29:[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/immutable/chunks/40q443tuofvly.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n2a:[\"$\",\"$L33\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@34\"}]}]\n35:I[376773,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"SectionHeader\"]\n36:I[329447,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"\"]\n37:I[782612,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"Image\"]\n38:I[804751,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"ArtworkPattern\"]\n31:[\"$\",\"section\",null,{\"className\":\"relative bg-background px-8 py-24 transition\",\"children\":[[\"$\",\"$L35\",null,{\"description\":\"Tutorials, deep dives and case studies on building beautifully animated React components.\",\"title\":\"From the blog\"}],[\"$\",\"div\",null,{\"className\":\"mx-auto mt-16 grid w-full max-w-7xl gap-4 md:grid-cols-3\",\"children\":[[\"$\",\"article\",\"/blog/ai-design-slop\",{\"className\":\"group relative\",\"children\":[\"$\",\"$L36\",null,{\"className\":\"flex h-full flex-col overflow-hidden rounded-2xl border bg-primary/40 transition-colors hover:bg-primary\",\"href\":\"/blog/ai-design-slop\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden aspect-video border-border border-b\",\"children\":[[\"$\",\"$L37\",null,{\"alt\":\"Amber and violet abstract color fields\",\"className\":\"object-cover object-center\",\"draggable\":false,\"fill\":true,\"sizes\":\"(max-width: 768px) 100vw, 400px\",\"src\":\"https://ik.imagekit.io/16u211libb/smoothui/scenes/amber-violet.webp\"}],[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"pointer-events-none absolute inset-0 flex items-center justify-center p-[7%] [container-type:inline-size]\",\"data-blog-cover\":\"audit\",\"children\":[[\"$\",\"$L38\",null,{\"variant\":\"squares\"}],[\"$\",\"div\",null,{\"className\":\"relative flex h-full w-full flex-col items-center justify-center rounded-[5cqw] border border-white/70 bg-white/75 px-[5%] py-[4%] text-center text-[#29272c] shadow-[0_12px_40px_#20102a18] backdrop-blur-md\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-mono text-[#514c58] text-[clamp(7px,1.8cqw,12px)] uppercase tracking-[0.18em]\",\"children\":\"SmoothUI Journal\"}],[\"$\",\"div\",null,{\"className\":\"min-h-0 w-[74%] flex-1 [\u0026\u003esvg]:h-full [\u0026\u003esvg]:w-full\",\"children\":[\"$\",\"svg\",null,{\"aria-hidden\":\"true\",\"focusable\":\"false\",\"height\"
151:\"180\",\"viewBox\":\"0 0 320 180\",\"width\":\"320\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"g\",null,{\"opacity\":\"0.45\",\"children\":[[\"$\",\"rect\",null,{\"fill\":\"#ffffff\",\"height\":105,\"rx\":\"12\",\"stroke\":\"#d8d5dc\",\"width\":104,\"x\":27,\"y\":34}],[\"$\",\"path\",null,{\"d\":\"M44 57h70M44 76h70M44 95h70M44 114h70\",\"stroke\":\"#a3a0a8\",\"strokeWidth\":\"5\"}]]}],[\"$\",\"path\",null,{\"d\":\"m146 82 10 9-10 9\",\"fill\":\"none\",\"stroke\":\"#4b5563\",\"strokeWidth\":\"3\"}],[\"$\",\"rect\",null,{\"fill\":\"#ffffff\",\"height\":128,\"rx\":\"12\",\"stroke\":\"#d8d5dc\",\"width\":112,\"x\":180,\"y\":22}],[\"$\",\"rect\",null,{\"fill\":\"#e5e7eb\",\"height\":\"40\",\"rx\":\"7\",\"width\":\"84\",\"x\":\"194\",\"y\":\"36\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":28,\"height\":28,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"#4b5563\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-check\",\"aria-hidden\":\"true\",\"x\":221,\"y\":41,\"children\":[[\"$\",\"path\",\"1gmf2c\",{\"d\":\"M20 6 9 17l-5-5\"}],\"$undefined\"]}],[\"$\",\"path\",null,{\"d\":\"M196 94h65M196 107h78M196 120h46\",\"stroke\":\"#29272c\",\"strokeLinecap\":\"round\",\"strokeWidth\":\"4\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"text-balance font-semibold text-[clamp(13px,4cqw,36px)] leading-tight tracking-tight\",\"children\":\"Beyond design slop\"}],[\"$\",\"span\",null,{\"className\":\"mt-[2%] text-[#514c58] text-[clamp(8px,2cqw,16px)]\",\"children\":\"Review · refine · repeat\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 text-muted-foreground text-sm\",\"children\":[[\"$\",\"time\",null,{\"dateTime\":\"2026-06-24\",\"children\":\"June 24, 2026\"}],[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":[4,\" min read\"]}]]}],[\"$\",\"h3\",null,{\"className\":\"mt-3 font-semibold text-foreground tracking-tight transition-colors group-hover:text-brand\",\"children\":\"AI Design Slop: Why AI-Generated UI Looks Generic — and the Fix\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 text-muted-foreground text-sm leading-relaxed\",\"children\":\"AI coding agents ship the same purple gradients, glassmorphism, and identical card grids. Here's why AI-generated UI looks like slop — and how a closed-loop design-quality bar fixes it for good.\"}],[\"$\",\"span\",null,{\"className\":\"mt-auto flex items-center gap-1 pt-6 font-medium text-brand text-sm\",\"children\":[\"Read\",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24px\",\"height\":\"24px\",\"viewBox\":\"0 0 24 24\",\"aria-hidden\":\"true\",\"className\":\"size-3.5 translate-y-px transition-transform group-hover:translate-x-0.5\",\"children\":[\"$undefined\",\"$L39\"]}]]}]]}]]}]}],\"$L3a\",\"$L3b\"]}],\"$L3c\"]}]\n42:I[802178,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\",\"/_next/static/immutable/chunks/0ktew84xr9d6x.js\",\"/_next/static/immutable/chunks/3j33blug_g09f.js\",\"/_next/static/immutable/chunks/27m4pu4hl0c43.js\",\"/_next/static/immutable/chunks/44b5w0qxqyqq3.js\",\"/_next/static/immutable/chunks/1oieo_61t706j.js\",\"/_next/static/immutable/chunks/26ej0uc9vff4w.js\",\"/_next/static/immutable/chunks/0t9n3c4--onxv.js\",\"/_next/static/immutable/chunks/3t_j8-uf41g2-.js\",\"/_next/static/immutable/chunks/1dg3t2gzq0_6q.js\",\"/_next/static/immutable/chunks/2mnmhjw-mlmjs.js\",\"/_next/static/immutable/chunks/08c0s84fiikwg.js\",\"/_next/static/immutable/chunks/0nka0q8u0svqe.js\",\"/_next/static/immutable/chunks/3t7nbipth8yrr.js\",\"/_next/static/immutable/chunks/2ha3tn5_zb4v1.js\",\"/_next/static/immutable/chunks/40q443tuofvly.js\"],\"Button\"]\n39:[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M7.99991 1.58576L18.4141 12L7.99991 22.4142L6.58569 21L15.5857 12L6.58569 2.99997L7.99991 1.58576Z\",\"fill\":\"currentColor\"}]\n3a:[\"$\",\"article\",\"/blog/best-react-animation-libraries\",{\"className\":\"group relative\",\"children\":[\"$\",\"$L36\",null,{\"className\":\"flex h-full flex-col overflow-hidden rounded-2xl border bg-primary/40 transition-colors hover:bg-primary\",\"href\":\"/blog/best-react-animation-libraries\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden aspect-video border-border border-b\",\"children\":[[\"$\",\"$L37\",null,{\"alt\":\"Cobalt blue and pink abstract color fields\",\"className\":\"object-cover object-center\",\"draggable\":false,\"fill\":true,\"sizes\":\"(max-width: 768px) 100vw, 400px\",\"src\":\"https://ik.imagekit.io/16u211libb/smoothui/scenes/cobalt-pink.webp\"}],[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"pointer-events-none absolute inset-0 flex items-center justify-center p-[7%] [container-type:inline-size]\",\"data-blog-cover\":\"libraries\",\"children\":[[\"$\",\"$L38\",null,{\"variant\":\"none\"}],[\"$\",\"div\",null,{\"className\":\"relative flex h-full w-full flex-col items-center justify-center rounded-[5cqw] border border-white/70 bg-white/75 px-[5%] py-[4%] text-center text-[#29272c] shadow-[0_12px_40px_#20102a18] backdrop-blur-md\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-mono text-[#514c58] text-[clamp(7px,1.8cqw,12px)] uppercase tracking-[0.18em]\",\"children\":\"SmoothUI Journal\"}],[\"$\",\"div\",null,{\"className\":\"min-h-0 w-[74%] flex-1 [\u0026\u003esvg]:h-full [\u0026\u003esvg]:w-full\",\"children\":[\"$\",\"svg\",null,{\"aria-hidden\":\"true\",\"focusable\":\"false\",\"height\"
151:\"180\",\"viewBox\":\"0 0 320 180\",\"width\":\"320\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"rect\",null,{\"fill\":\"#ffffff\",\"height\":62,\"rx\":\"12\",\"stroke\":\"#d8d5dc\",\"width\":84,\"x\":18,\"y\":45}],[\"$\",\"rect\",null,{\"fill\":\"#ffffff\",\"height\":104,\"rx\":\"12\",\"stroke\":\"#d8d5dc\",\"width\":84,\"x\":118,\"y\":25}],[\"$\",\"rect\",null,{\"fill\":\"#ffffff\",\"height\":62,\"rx\":\"12\",\"stroke\":\"#d8d5dc\",\"width\":84,\"x\":218,\"y\":45}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":32,\"height\":32,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"#a3a0a8\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-layers\",\"aria-hidden\":\"true\",\"x\":44,\"y\":62,\"children\":[[\"$\",\"path\",\"zw3jo\",{\"d\":\"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z\"}],[\"$\",\"path\",\"1wduqc\",{\"d\":\"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12\"}],[\"$\",\"path\",\"kqbvx6\",{\"d\":\"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17\"}],\"$undefined\"]}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":34,\"height\":34,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"#4b5563\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-sparkles\",\"aria-hidden\":\"true\",\"x\":143,\"y\":46,\"children\":[[\"$\",\"path\",\"1s2grr\",{\"d\":\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z\"}],[\"$\",\"path\",\"1rf3ol\",{\"d\":\"M20 2v4\"}],[\"$\",\"path\",\"gwowj6\",{\"d\":\"M22 4h-4\"}],[\"$\",\"circle\",\"6kqj1y\",{\"cx\":\"4\",\"cy\":\"20\",\"r\":\"2\"}],\"$undefined\"]}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":32,\"height\":32,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"#a3a0a8\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-code-xml\",\"aria-hidden\":\"true\",\"x\":244,\"y\":62,\"children\":[[\"$\",\"path\",\"1inbqp\",{\"d\":\"m18 16 4-4-4-4\"}],[\"$\",\"path\",\"15zrgr\",{\"d\":\"m6 8-4 4 4 4\"}],[\"$\",\"path\",\"e7oirm\",{\"d\":\"m14.5 4-5 16\"}],\"$undefined\"]}],[\"$\",\"path\",null,{\"d\":\"M138 98h44M140 110h40\",\"stroke\":\"#4b5563\",\"strokeLinecap\":\"round\",\"strokeWidth\":\"4\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"text-balance font-semibold text-[clamp(13px,4cqw,36px)] leading-tight tracking-tight\",\"children\":\"Choose your motion\"}],[\"$\",\"span\",null,{\"className\":\"mt-[2%] text-[#514c58] text-[clamp(8px,2cqw,16px)]\",\"children\":\"A React library field guide\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 text-muted-foreground text-sm\",\"children\":[[\"$\",\"time\",null,{\"dateTime\":\"2026-04-16\",\"children\":\"April 16, 2026\"}],\"$L3d\",\"$L3e\"]}],\"$L3f\",\"$L40\",\"$L41\"]}]]}]}]\n3b:[\"$\",\"article\",\"/blog/framer-motion-tutorial\",{\"className\":\"group relative\",\"children\":[\"$\",\"$L36\",null,{\"className\":\"flex h-full flex-col overflow-hidden rounded-2xl border bg-primary/40 transition-colors hover:bg-primary\",\"href\":\"/blog/framer-motion-tutorial\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative overflow-hidden aspect-video border-border border-b\",\"children\":[[\"$\",\"$L37\",null,{\"alt\":\"Sky blue and peach heavily blurred color fields with fine grain\",\"className\":\"object-cover object-center\",\"draggable\":false,\"fill\":true,\"sizes\":\"(max-width: 768px) 100vw, 400px\",\"src\":\"https://ik.imagekit.io/16u211libb/smoothui/scenes/sky-peach.webp\"}],[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"pointer-events-none absolute inset-0 flex items-center justify-center p-[7%] [container-type:inline-size]\",\"data-blog-cover\":\"motion\",\"children\":[[\"$\",\"$L38\",null,{\"variant\":\"contours\"}],[\"$\",\"div\",null,{\"className\":\"relative flex h-full w-full flex-col items-center justify-center rounded-[5cqw] border border-white/70 bg-white/75 px-[5%] py-[4%] text-center text-[#29272c] shadow-[0_12px_40px_#20102a18] backdrop-blur-md\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-mono text-[#514c58] text-[clamp(7px,1.8cqw,12px)] uppercase tracking-[0.18em]\",\"children\":\"SmoothUI Journal\"}],[\"$\",\"div\",null,{\"className\":\"min-h-0 w-[74%] flex-1 [\u0026\u003esvg]:h-full [\u0026\u003esvg]:w-full\",\"children\":[\"$\",\"svg\",null,{\"aria-hidden\":\"true\",\"focusable\":\"false\",\"height\"
151:\"180\",\"viewBox\":\"0 0 320 180\",\"width\":\"320\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M38 125C90 125 98 40 160 40s62 85 122 85\",\"fill\":\"none\",\"stroke\":\"#cac5d0\",\"strokeWidth\":\"3\"}],[\"$\",\"path\",null,{\"d\":\"M38 125C90 125 98 40 160 40\",\"fill\":\"none\",\"stroke\":\"#4b5563\",\"strokeWidth\":\"4\"}],[\"$\",\"rect\",null,{\"fill\":\"#ffffff\",\"height\":\"30\",\"rx\":\"8\",\"stroke\":\"#a3a0a8\",\"width\":\"30\",\"x\":\"23\",\"y\":\"110\"}],[\"$\",\"rect\",null,{\"fill\":\"#4b5563\",\"height\":\"38\",\"rx\":\"11\",\"transform\":\"rotate(15 160 40)\",\"width\":\"38\",\"x\":\"141\",\"y\":\"21\"}],[\"$\",\"rect\",null,{\"fill\":\"#ffffff\",\"height\":\"30\",\"rx\":\"8\",\"stroke\":\"#a3a0a8\",\"width\":\"30\",\"x\":\"267\",\"y\":\"110\"}],[\"$\",\"path\",null,{\"d\":\"M53 157h211\",\"stroke\":\"#a3a0a8\",\"strokeDasharray\":\"3 8\"}]]}]}],[\"$\",\"span\",null,{\"className\":\"text-balance font-semibold text-[clamp(13px,4cqw,36px)] leading-tight tracking-tight\",\"children\":\"From state to motion\"}],[\"$\",\"span\",null,{\"className\":\"mt-[2%] text-[#514c58] text-[clamp(8px,2cqw,16px)]\",\"children\":\"Transitions · gestures · layout\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-1 flex-col p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 text-muted-foreground text-sm\",\"children\":[[\"$\",\"time\",null,{\"dateTime\":\"2026-04-16\",\"children\":\"April 16, 2026\"}],[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":[8,\" min read\"]}]]}],[\"$\",\"h3\",null,{\"className\":\"mt-3 font-semibold text-foreground tracking-tight transition-colors group-hover:text-brand\",\"children\":\"Framer Motion Tutorial: Build Stunning React Animations in 2026\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 text-muted-foreground text-sm leading-relaxed\",\"children\":\"Learn how to use Motion (formerly Framer Motion) to build smooth, accessible animations in React. From basic transitions to spring physics, gestures, and layout animations — with real examples.\"}],[\"$\",\"span\",null,{\"className\":\"mt-auto flex items-center gap-1 pt-6 font-medium text-brand text-sm\",\"children\":[\"Read\",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24px\",\"height\":\"24px\",\"viewBox\":\"0 0 24 24\",\"aria-hidden\":\"true\",\"className\":\"size-3.5 translate-y-px transition-transform group-hover:translate-x-0.5\",\"children\":[\"$undefined\",[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M7.99991 1.58576L18.4141 12L7.99991 22.4142L6.58569 21L15.5857 12L6.58569 2.99997L7.99991 1.58576Z\",\"fill\":\"currentColor\"}]]}]]}]]}]]}]}]\n3c:[\"$\",\"div\",null,{\"className\":\"mx-auto mt-8 flex justify-center\",\"children\":[\"$\",\"$L42\",null,{\"asChild\":true,\"size\":\"lg\",\"variant\":\"candy\",\"children\":[\"$\",\"$L36\",null,{\"href\":\"/blog\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1\",\"children\":[\"$\",\"span\",null,{\"children\":\"View all posts\"}]}],[\"$\",\"svg\",null,{\"aria-hidden\":\"true\",\"className\":\"-mx-1.5 size-5 shrink-0 text-white/72\",\"fill\":\"none\",\"viewBox\":\"0 0 20 20\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":[\"$\",\"path\",null,{\"d\":\"M8.333 13.333 11.667 10 8.333 6.667\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"square\",\"strokeWidth\":\"1.25\"}]}]]}]}]}]\n3d:[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"children\":\"·\"}]\n3e:[\"$\",\"span\",null,{\"children\":[7,\" min read\"]}]\n3f:[\"$\",\"h3\",null,{\"className\":\"mt-3 font-semibold text-foreground tracking-tight transition-colors group-hover:text-brand\",\"children\":\"Best React Animation Libraries in 2026: A Complete Comparison\"}]\n40:[\"$\",\"p\",null,{\"className\":\"mt-2 line-clamp-3 text-muted-foreground text-sm leading-relaxed\",\"children\":\"A detailed comparison of the top React animation libraries — Motion, React Spring, GSAP, SmoothUI, and more. Learn which library fits your project with real examples and performance benchmarks.\"}]\n41:[\"$\",\"span\",null,{\"className\":\"mt-auto flex items-center gap-1 pt-6 font-medium text-brand text-sm\",\"children\":[\"Read\",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24px\",\"height\"
151:\"24px\",\"viewBox\":\"0 0 24 24\",\"aria-hidden\":\"true\",\"className\":\"size-3.5 translate-y-px transition-transform group-hover:translate-x-0.5\",\"children\":[\"$undefined\",[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"clipRule\":\"evenodd\",\"d\":\"M7.99991 1.58576L18.4141 12L7.99991 22.4142L6.58569 21L15.5857 12L6.58569 2.99997L7.99991 1.58576Z\",\"fill\":\"currentColor\"}]]}]]}]\n2c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n43:I[170182,[\"/_next/static/immutable/chunks/3a8aeu_l0zagk.js\",\"/_next/static/immutable/chunks/0000g8hx493t9.js\"],\"IconMark\"]\n2e:[[\"$\",\"title\",\"0\",{\"children\":\"SmoothUI - Animated React Components for shadcn/ui | Motion \u0026 Tailwind\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible, fully customizable with Tailwind CSS.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"react components,tailwindcss ui,motion animations,framer motion,shadcn/ui,shadcn ui components,react ui library,customizable components,animated ui components,dark mode components,shadcn alternative\"}],[\"$\",\"meta\",\"4\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"5\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://smoothui.dev\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"SmoothUI - Animated React Components for shadcn/ui\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Beautiful animated React components with smooth Motion animations. Drop-in shadcn/ui compatible, fully customizable. 198 free components for modern UIs.\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://smoothui.dev\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:site_name\",\"content\":\"SmoothUI\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://smoothui.dev/og-optimized.webp\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:alt\",\"content\":\"SmoothUI Cover\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:site\",\"content\":\"@educalvolpz\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:creator\",\"content\":\"@educalvolpz\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:title\",\"content\":\"SmoothUI - Animated React Components for shadcn/ui\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:description\",\"content\":\"Beautiful animated React components with smooth Motion animations. Drop-in shadcn/ui compatible, fully customizable. 198 free components for modern UIs.\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:image\",\"content\":\"https://smoothui.dev/og-optimized.webp\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image:alt\",\"content\":\"SmoothUI Cover\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"26\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"27\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.4450i9muj9qym.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"$L43\",\"28\",{}]]\n34:null\n"])</script>
151</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.