CINXE.COM
The Ultimate Free Tailwind CSS Components Library | David UI
<!DOCTYPE html><html lang="en" class="__className_2614bb scroll-smooth"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="https://david-ui.creative-tim.com/david-ui/_next/static/media/122c360d7fe6d395-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="https://david-ui.creative-tim.com/david-ui/_next/static/media/a34f9d1faa5f3315-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/html.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/react.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/next.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/cra.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/remix.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/vite.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/astro.svg"/><link rel="preload" as="image" href="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/gatsby.svg"/><link rel="stylesheet" href="https://david-ui.creative-tim.com/david-ui/_next/static/css/075e3758495b2fa5.css" crossorigin="" data-precedence="next"/><link rel="stylesheet" href="https://david-ui.creative-tim.com/david-ui/_next/static/css/45e6da588a52edc6.css" crossorigin="" data-precedence="next"/><link rel="stylesheet" href="https://david-ui.creative-tim.com/david-ui/_next/static/css/ba4806fb7aec8e42.css" crossorigin="" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/webpack-215e36c49ba500b4.js" crossorigin=""/><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/492d2329-5a24ac879006fa92.js" async="" crossorigin=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/63098-9ed513901945f086.js" async="" crossorigin=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/main-app-2f1fd78a00bf0cc3.js" async="" crossorigin=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/dda25572-22595321c43831c1.js" async=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/4a9a29f8-d4338eb6d52b97ea.js" async=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/6e51eac4-78df8063c5b07660.js" async=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/37079-2ed54e7b7316f091.js" async=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/39525-82cd29d7ed4ae7c4.js" async=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/36961-1d5b16852874a655.js" async=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/app/page-e47ca361262080b5.js" async=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/5045-c2731ef882b42d3a.js" async=""></script><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/app/layout-09de93f2482c3fe6.js" async=""></script><title>The Ultimate Free Tailwind CSS Components Library | David UI</title><meta name="description" content="Access David UI's free library of Tailwind CSS and React components. Build modern UIs with ease and flexibility."/><link rel="canonical" href="https://www.creative-tim.com/david-ui"/><meta property="og:title" content="The Ultimate Free Tailwind CSS Components Library | David UI"/><meta property="og:description" content="Access David UI's free library of Tailwind CSS and React components. Build modern UIs with ease and flexibility."/><meta property="og:url" content="https://www.creative-tim.com/david-ui"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="The Ultimate Free Tailwind CSS Components Library | David UI"/><meta name="twitter:description" content="Access David UI's free library of Tailwind CSS and React components. Build modern UIs with ease and flexibility."/><meta name="next-size-adjust"/><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" crossorigin="" noModule=""></script></head><body class="h-screen w-screen bg-background bg-stone-50"><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800,900|Noto+Serif:300,400,500,600,700"/><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!--$--><main><nav class="fixed top-0 z-50 w-full"><div class="py-3 px-2 md:px-0 md:py-4"><div class="relative mt-0 flex container items-center justify-between gap-2 mx-auto"><div class="hidden items-center gap-1 lg:flex bg-white shadow-sm border border-surface rounded-lg py-1 px-3"><a class="mx-2 font-bold text-sm" href="/david-ui">DAVID UI</a><a href="https://www.creative-tim.com/david-ui/docs/html/overview"><span class="group flex cursor-pointer select-none items-center gap-1.5 overflow-hidden rounded-md py-2 pl-2 pr-2.5 text-black text-sm transition-all duration-150 hover:bg-surface-light dark:text-white dark:hover:bg-surface">Docs</span></a><a href="https://www.creative-tim.com/david-ui/docs/html/button"><span class="group flex cursor-pointer select-none items-center gap-1.5 overflow-hidden rounded-md py-2 pl-2 pr-2.5 text-black text-sm transition-all duration-150 hover:bg-surface-light dark:text-white dark:hover:bg-surface">Components</span></a><div class="group relative hidden shrink-0 cursor-pointer place-items-center rounded-md text-black transition-all duration-300 hover:bg-surface-light lg:grid dark:text-white dark:hover:bg-surface"><span class="group flex cursor-pointer select-none items-center gap-1.5 overflow-hidden rounded-md py-2 pl-2 pr-2.5 text-black text-sm transition-all duration-150 hover:bg-surface-light dark:text-white dark:hover:bg-surface"><i class="relative h-[18px] w-[18px]"><svg width="1.5em" height="1.5em" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="absolute h-full w-full stroke-[1.5]"><path d="M17 17L21 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></i>Search</span><div class="absolute inset-0 m-0 w-8 overflow-hidden opacity-0 [&_>_button]:m-0 [&_>_button]:w-8 [&_>_button]:p-0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div class="flex lg:hidden items-center gap-2 bg-white shadow-sm border border-surface rounded-lg py-1 pl-1 pr-3"><a class="flex items-center gap-2 lg:!hidden" href="/david-ui"><div class="h-9 w-9 bg-stone-800 grid place-items-center text-white text-lg font-bold rounded-lg">D</div><span class="font-bold text-sm">DAVID UI</span></a></div><div class="flex items-center gap-1 bg-white shadow-sm border border-surface rounded-lg py-1 px-3 pr-1.5"><div class="group relative grid h-8 w-8 shrink-0 cursor-pointer place-items-center rounded-md text-black transition-all duration-300 hover:bg-surface-light lg:hidden dark:text-white dark:hover:bg-surface"><svg width="1.5em" height="1.5em" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-5 w-5 stroke-[1.5]"><path d="M17 17L21 21" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><div class="absolute inset-0 m-0 w-full overflow-hidden opacity-0 [&_>_button]:m-0 [&_>_button]:w-8 [&_>_button]:p-0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div><a class="hidden sm:flex" href="/david-ui/blocks"><span class="group flex cursor-pointer select-none items-center gap-1.5 overflow-hidden rounded-md py-2 pl-2 pr-2.5 text-black text-sm transition-all duration-150 hover:bg-surface-light dark:text-white dark:hover:bg-surface">Blocks</span></a><a target="_blank" class="hidden sm:flex" href="https://www.figma.com/community/file/1449329591340093363/david-ui-open-source-library"><span class="group flex cursor-pointer select-none items-center gap-1.5 overflow-hidden rounded-md py-2 pl-2 pr-2.5 text-black text-sm transition-all duration-150 hover:bg-surface-light dark:text-white dark:hover:bg-surface">Figma</span></a><a target="_blank" href="https://github.com/creativetimofficial/david-ai"><span class="group flex cursor-pointer select-none items-center gap-1.5 overflow-hidden rounded-md py-2 pl-2 pr-2.5 text-black text-sm transition-all duration-150 hover:bg-surface-light dark:text-white dark:hover:bg-surface"><i class="relative h-[18px] w-[18px]"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="absolute h-full w-full stroke-[1.5] translate-y-0 scale-100 opacity-100 group-hover:-translate-y-4 group-hover:scale-90 group-hover:opacity-0 transition-all duration-300"><path d="M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><svg width="1.5em" height="1.5em" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="absolute h-full w-full translate-y-4 scale-90 stroke-[1.5] opacity-0 group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-300"><path d="M9.95242 9.62272L11.5109 6.31816C11.711 5.89395 12.289 5.89395 12.4891 6.31816L14.0476 9.62272L17.5329 10.1559C17.9801 10.2243 18.1583 10.7996 17.8346 11.1296L15.313 13.7001L15.9081 17.3314C15.9845 17.7978 15.5168 18.1534 15.1167 17.9331L12 16.2177L8.88328 17.9331C8.48316 18.1534 8.01545 17.7978 8.09187 17.3314L8.68695 13.7001L6.16545 11.1296C5.8417 10.7996 6.01993 10.2243 6.46711 10.1559L9.95242 9.62272Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M22 12L23 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 2V1" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 23V22" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 20L19 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 4L19 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 20L5 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 4L5 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M1 12L2 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></i>0</span></a><a class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm py-1.5 px-3 shadow-sm hover:shadow bg-primary hover:bg-primary-light relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-primary-foreground rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased ml-1" data-shape="default" data-width="default" href="https://www.creative-tim.com/david-ui/docs/html/overview">Get Started</a><button data-open="false" aria-expanded="false" aria-haspopup="dialog" class="place-items-center border align-middle select-none font-sans font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none data-[shape=circular]:rounded-full text-sm min-w-[34px] min-h-[34px] rounded-md shadow-sm hover:shadow bg-transparent border-secondary text-secondary-foreground hover:bg-secondary outline-none ml-1 grid sm:ml-0 lg:hidden" data-shape="default"><svg width="1.5em" height="1.5em" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4 stroke-2"><path d="M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 20.5C12.2761 20.5 12.5 20.2761 12.5 20C12.5 19.7239 12.2761 19.5 12 19.5C11.7239 19.5 11.5 19.7239 11.5 20C11.5 20.2761 11.7239 20.5 12 20.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 4.5C12.2761 4.5 12.5 4.27614 12.5 4C12.5 3.72386 12.2761 3.5 12 3.5C11.7239 3.5 11.5 3.72386 11.5 4C11.5 4.27614 11.7239 4.5 12 4.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div></div></nav><div class="relative bg-[url('https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind/hero-presentation-clean.jpg')] bg-cover bg-bottom bg-no-repeat"><div class="w-full h-full absolute top-0 left-0 z-1"><div class="container grid grid-cols-6 relative w-full h-full mx-auto"><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px] absolute right-4 top-0 h-full"></div></div><div class="z-0 h-[220px] bg-gradient-to-t absolute bottom-0 left-0 w-full from-stone-900 via-stone-900/70 to-stone-900/0"></div></div><section class="container mx-auto text-center pt-24 relative min-h-[95vh] items-center"><div class="relative z-2 mt-[15vh]"><h1 class="font-sans antialiased font-bold text-3xl md:text-4xl lg:text-5xl dark:text-white text-center !leading-tight max-w-4xl mx-auto mb-6 tracking-tight text-white"><span class="font-serif font-normal tracking-normal">The Ultimate Component Library</span> <br/> Powered by AI and Tailwind CSS</h1><p class="font-sans antialiased max-w-2xl mx-auto text-xl text-white/70">David UI is your open-source solution to building high-converting UIs, offering plug-and-play components that are optimized for any Tailwind CSS workflows.</p><div class="flex flex-wrap items-center gap-4 justify-center mt-10"><button class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center transition-all ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-base rounded-md py-2.5 px-5 hover:border-secondary/10 shadow-none hover:shadow-none bg-white/20 text-white border-white/30 hover:bg-white/40 duration-150" data-shape="default" data-width="default">View Components</button><a class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-base py-2.5 px-5 shadow-sm hover:shadow-lg bg-primary hover:bg-primary-light relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-primary-foreground rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-shape="default" data-width="default" href="https://www.creative-tim.com/david-ui/docs/html/overview">Get Started</a></div></div></section></div><section class="relative bg-stone-900 mt-0"><div class="w-full h-full absolute top-0 left-0 z-0"><div class="container grid grid-cols-6 relative w-full h-full mx-auto"><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px] absolute right-4 top-0 h-full"></div></div></div><div class="max-w-5xl mx-auto"><img alt="hero image" loading="lazy" width="1280" height="1280" decoding="async" data-nimg="1" class="w-full rounded-xl -top-32 relative z-1" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind%2Fdavid-dashboard.png&w=1920&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind%2Fdavid-dashboard.png&w=3840&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind%2Fdavid-dashboard.png&w=3840&q=75"/></div><section class="container mx-auto text-center pb-32 relative"><div class="relative z-1"><div class="text-center z-1"><h2 class="font-sans antialiased text-2xl md:text-3xl lg:text-4xl font-extrabold tracking-tight text-white">Remarkable Achievements</h2><p class="font-sans antialiased text-stone-500 text-xl max-w-3xl mx-auto mt-4">Discover how our UI Tools have transformed web development. These achievements showcase our dedication to innovation and our community's growth.</p></div><div class="mt-16 grid md:grid-cols-2 text-start grid-cols-1 gap-6 lg:grid-cols-4"><div class="w-full border shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative bg-gradient-to-b from-stone-800 to-stone-900 border-stone-950 rounded-xl after:absolute after:inset-0 after:box-shadow after:shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),inset_0_-2px_1px_rgba(0,0,0,0.25)] after:pointer-events-none after:rounded-xl !shadow-2xl"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-7 h-7 stroke-2 text-white"><path d="M1 20V19C1 15.134 4.13401 12 8 12V12C11.866 12 15 15.134 15 19V20" stroke="currentColor" stroke-linecap="round"></path><path d="M13 14V14C13 11.2386 15.2386 9 18 9V9C20.7614 9 23 11.2386 23 14V14.5" stroke="currentColor" stroke-linecap="round"></path><path d="M8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18 9C19.6569 9 21 7.65685 21 6C21 4.34315 19.6569 3 18 3C16.3431 3 15 4.34315 15 6C15 7.65685 16.3431 9 18 9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><h3 class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl mt-4 mb-1 text-white">2.6M+</h3><p class="font-sans antialiased text-base text-white/60">Community Members</p><p class="font-sans antialiased text-base text-white/60 mt-6">Join our community of developers and designers</p></div><div class="w-full border shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative bg-gradient-to-b from-stone-800 to-stone-900 border-stone-950 rounded-xl after:absolute after:inset-0 after:box-shadow after:shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),inset_0_-2px_1px_rgba(0,0,0,0.25)] after:pointer-events-none after:rounded-xl !shadow-2xl"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-7 h-7 stroke-2 text-white"><path d="M6 20L18 20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 4V16M12 16L15.5 12.5M12 16L8.5 12.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><h3 class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl mt-4 mb-1 text-white">8.6M+</h3><p class="font-sans antialiased text-base text-white/60">Cumulative Downloads</p><p class="font-sans antialiased text-base text-white/60 mt-6">Based on Material Tailwind and Creative Tim Products</p></div><div class="w-full border shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative bg-gradient-to-b from-stone-800 to-stone-900 border-stone-950 rounded-xl after:absolute after:inset-0 after:box-shadow after:shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),inset_0_-2px_1px_rgba(0,0,0,0.25)] after:pointer-events-none after:rounded-xl !shadow-2xl"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-7 h-7 stroke-2 text-white"><path d="M8.58737 8.23597L11.1849 3.00376C11.5183 2.33208 12.4817 2.33208 12.8151 3.00376L15.4126 8.23597L21.2215 9.08017C21.9668 9.18848 22.2638 10.0994 21.7243 10.6219L17.5217 14.6918L18.5135 20.4414C18.6409 21.1798 17.8614 21.7428 17.1945 21.3941L12 18.678L6.80547 21.3941C6.1386 21.7428 5.35909 21.1798 5.48645 20.4414L6.47825 14.6918L2.27575 10.6219C1.73617 10.0994 2.03322 9.18848 2.77852 9.08017L8.58737 8.23597Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><h3 class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl mt-4 mb-1 text-white">48,000+</h3><p class="font-sans antialiased text-base text-white/60">Github Cumulative Stars</p><p class="font-sans antialiased text-base text-white/60 mt-6">On 100+ Open Source Repositories and Projects</p></div><div class="w-full border shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative bg-gradient-to-b from-stone-800 to-stone-900 border-stone-950 rounded-xl after:absolute after:inset-0 after:box-shadow after:shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),inset_0_-2px_1px_rgba(0,0,0,0.25)] after:pointer-events-none after:rounded-xl !shadow-2xl"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-7 h-7 stroke-2 text-white"><path d="M2.6954 7.18536L11.6954 11.1854L12.3046 9.81464L3.3046 5.81464L2.6954 7.18536ZM12.75 21.5V10.5H11.25V21.5H12.75ZM12.3046 11.1854L21.3046 7.18536L20.6954 5.81464L11.6954 9.81464L12.3046 11.1854Z" fill="currentColor"></path><path d="M3 17.1101V6.88992C3 6.65281 3.13964 6.43794 3.35632 6.34164L11.7563 2.6083C11.9115 2.53935 12.0885 2.53935 12.2437 2.6083L20.6437 6.34164C20.8604 6.43794 21 6.65281 21 6.88992V17.1101C21 17.3472 20.8604 17.5621 20.6437 17.6584L12.2437 21.3917C12.0885 21.4606 11.9115 21.4606 11.7563 21.3917L3.35632 17.6584C3.13964 17.5621 3 17.3472 3 17.1101Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.5 4.5L16.1437 8.34164C16.3604 8.43794 16.5 8.65281 16.5 8.88992V12.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><h3 class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl mt-4 mb-1 text-white">280,000+</h3><p class="font-sans antialiased text-base text-white/60">Monthly NPM Downloads</p><p class="font-sans antialiased text-base text-white/60 mt-6">Including React, HTML, Tailwind CSS and more.</p></div></div></div></section></section><div class="bg-gradient-to-b from-stone-100 to-stone-300"><section class=" py-16 relative"><div class="container mx-auto relative z-1"><div class="flex items-end justify-between flex-wrap gap-8"><div class="text-start"><h2 class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl text-black dark:text-white mt-4">Tailwind CSS Framework Integrations</h2><p class="font-sans antialiased text-xl text-stone-500 max-w-2xl mt-2">Enhance your workflow with seamless integrations for your favorite tools using David UI.</p></div></div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-16"><div class="p-1 relative before:z-0 before:absolute before:inset-0 before:border before:border-stone-200 before:-m-1 before:rounded-xl"><div class="w-full rounded-lg shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative z-1 border border-stone-200 transition-all duration-300 hover:shadow-lg"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/html.svg" alt="HTML" class="w-8 h-8"/><p class="font-sans antialiased text-lg font-semibold text-stone-800 mt-3 mb-1.5">HTML</p><p class="font-sans antialiased text-stone-500 mb-4 text-sm min-h-[4rem]">The standard markup language for creating Web pages and applications.</p><a class="font-semibold text-stone-800 flex items-center gap-1 text-sm" href="https://www.creative-tim.com/david-ui/docs/html/overview">Get Started <svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-4 h-4 stroke-2"><path d="M9 6L15 12L9 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div></div><div class="p-1 relative before:z-0 before:absolute before:inset-0 before:border before:border-stone-200 before:-m-1 before:rounded-xl"><div class="w-full rounded-lg shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative z-1 border border-stone-200 transition-all duration-300 opacity-50 cursor-not-allowed"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/react.svg" alt="React" class="w-8 h-8"/><p class="font-sans antialiased text-lg font-semibold text-stone-800 mt-3 mb-1.5">React</p><p class="font-sans antialiased text-stone-500 mb-4 text-sm min-h-[4rem]">Open-source JavaScript framework and library developed by Facebook.</p><p class="font-sans antialiased text-stone-500 text-sm">Coming Soon</p></div></div><div class="p-1 relative before:z-0 before:absolute before:inset-0 before:border before:border-stone-200 before:-m-1 before:rounded-xl"><div class="w-full rounded-lg shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative z-1 border border-stone-200 transition-all duration-300 opacity-50 cursor-not-allowed"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/next.svg" alt="Next.js" class="w-8 h-8"/><p class="font-sans antialiased text-lg font-semibold text-stone-800 mt-3 mb-1.5">Next.js</p><p class="font-sans antialiased text-stone-500 mb-4 text-sm min-h-[4rem]">React framework that gives you building blocks to create web apps.</p><p class="font-sans antialiased text-stone-500 text-sm">Coming Soon</p></div></div><div class="p-1 relative before:z-0 before:absolute before:inset-0 before:border before:border-stone-200 before:-m-1 before:rounded-xl"><div class="w-full rounded-lg shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative z-1 border border-stone-200 transition-all duration-300 opacity-50 cursor-not-allowed"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/cra.svg" alt="Creat React App" class="w-8 h-8"/><p class="font-sans antialiased text-lg font-semibold text-stone-800 mt-3 mb-1.5">Creat React App</p><p class="font-sans antialiased text-stone-500 mb-4 text-sm min-h-[4rem]">Set up a modern web app by running one simple terminal command.</p><p class="font-sans antialiased text-stone-500 text-sm">Coming Soon</p></div></div><div class="p-1 relative before:z-0 before:absolute before:inset-0 before:border before:border-stone-200 before:-m-1 before:rounded-xl"><div class="w-full rounded-lg shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative z-1 border border-stone-200 transition-all duration-300 opacity-50 cursor-not-allowed"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/remix.svg" alt="Remix" class="w-8 h-8"/><p class="font-sans antialiased text-lg font-semibold text-stone-800 mt-3 mb-1.5">Remix</p><p class="font-sans antialiased text-stone-500 mb-4 text-sm min-h-[4rem]">Full stack web framework that lets you focus on the user interface.</p><p class="font-sans antialiased text-stone-500 text-sm">Coming Soon</p></div></div><div class="p-1 relative before:z-0 before:absolute before:inset-0 before:border before:border-stone-200 before:-m-1 before:rounded-xl"><div class="w-full rounded-lg shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative z-1 border border-stone-200 transition-all duration-300 opacity-50 cursor-not-allowed"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/vite.svg" alt="Vite" class="w-8 h-8"/><p class="font-sans antialiased text-lg font-semibold text-stone-800 mt-3 mb-1.5">Vite</p><p class="font-sans antialiased text-stone-500 mb-4 text-sm min-h-[4rem]">Flexible programmatic APIs with full TypeScript typing.</p><p class="font-sans antialiased text-stone-500 text-sm">Coming Soon</p></div></div><div class="p-1 relative before:z-0 before:absolute before:inset-0 before:border before:border-stone-200 before:-m-1 before:rounded-xl"><div class="w-full rounded-lg shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative z-1 border border-stone-200 transition-all duration-300 opacity-50 cursor-not-allowed"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/astro.svg" alt="Astro" class="w-8 h-8"/><p class="font-sans antialiased text-lg font-semibold text-stone-800 mt-3 mb-1.5">Astro</p><p class="font-sans antialiased text-stone-500 mb-4 text-sm min-h-[4rem]">All-in-one web framework designed for speed.</p><p class="font-sans antialiased text-stone-500 text-sm">Coming Soon</p></div></div><div class="p-1 relative before:z-0 before:absolute before:inset-0 before:border before:border-stone-200 before:-m-1 before:rounded-xl"><div class="w-full rounded-lg shadow-sm overflow-hidden bg-background shadow-black/5 p-6 relative z-1 border border-stone-200 transition-all duration-300 opacity-50 cursor-not-allowed"><img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/gatsby.svg" alt="Gatsby" class="w-8 h-8"/><p class="font-sans antialiased text-lg font-semibold text-stone-800 mt-3 mb-1.5">Gatsby</p><p class="font-sans antialiased text-stone-500 mb-4 text-sm min-h-[4rem]">The Fastest Frontend for the Headless Web.</p><p class="font-sans antialiased text-stone-500 text-sm">Coming Soon</p></div></div></div></div></section><section class="py-8 relative" id="all-features"><div class="w-full h-full absolute top-0 left-0 z-0"><div class="container grid grid-cols-6 relative w-full h-full mx-auto"><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-400 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-400 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-400 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-400 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-400 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-400 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-400 to-50% to-transparent bg-[length:1px_9px] absolute right-4 top-0 h-full"></div></div></div><div class="relative z-20"><div class="text-center container mx-auto mb-8 relative z-1"><h2 class="font-sans antialiased text-3xl md:text-4xl lg:text-5xl text-black dark:text-white font-bold tracking-tight">Built for the Future of Development</h2><p class="font-sans antialiased text-foreground text-xl max-w-2xl mx-auto mt-4">Discover the difference our AI and Tailwind CSS features can bring to your web projects with solutions designed for today's coding needs.</p></div><div id="scroll-cards" class="space-y-6 container mx-auto -translate-y-24 pt-32"><div class="scroll-card sticky" style="bottom:-0px;z-index:1;margin-left:0px;margin-right:0px" id="scroll-card-0"><div class="shadow-lg scroll-card-content grid grid-cols-1 bg-stone-50 items-center md:grid-cols-2 gap-6 border border-surface rounded-lg py-16 pr-12 p-2"><div class="row-start-2 md:row-start-1 p-6 px-10"><h3 class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl text-black dark:text-white">Built on Tailwind CSS</h3><p class="font-sans antialiased mt-2 mb-6 text-lg text-stone-500">Currently we support Tailwind CSS. Every component in the library is lightweight and flexible. Follow us for updates!</p><ul class="space-y-4"><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">Tailwind CSS - ready now</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">Figma - ready now</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">React - soon</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">Vuejs - soon</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">Angular - soon</p></li></ul></div><img alt="blocks" loading="lazy" width="1024" height="1024" decoding="async" data-nimg="1" class="rounded-md md:h-128 object-cover object-center w-full" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind-pro%2Fv3%2Ffree-features-1.png&w=1080&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind-pro%2Fv3%2Ffree-features-1.png&w=2048&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind-pro%2Fv3%2Ffree-features-1.png&w=2048&q=75"/></div></div><div class="scroll-card sticky" style="bottom:-20px;z-index:0;margin-left:15px;margin-right:15px" id="scroll-card-1"><div class="shadow-lg scroll-card-content grid grid-cols-1 bg-stone-50 items-center md:grid-cols-2 gap-6 border border-surface rounded-lg py-16 pr-12 p-2"><div class="row-start-2 md:row-start-1 p-6 px-10"><h3 class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl text-black dark:text-white">300+ Ready to Use Components</h3><p class="font-sans antialiased mt-2 mb-6 text-lg text-stone-500">Skip repetitive tasks and focus on your core application logic to deliver stunning results out of the box.</p><ul class="space-y-4"><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">Buttons, Inputs, Tables, Cards and more</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">Figma Design Files Included</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">Responsive & Customizable</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">Light & Dark Mode (coming soon)</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">Easy Integration with Existing Projects</p></li></ul></div><img alt="blocks" loading="lazy" width="1024" height="1024" decoding="async" data-nimg="1" class="rounded-md md:h-128 object-cover object-center w-full" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind-pro%2Fv3%2Ffree-features-2.png&w=1080&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind-pro%2Fv3%2Ffree-features-2.png&w=2048&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind-pro%2Fv3%2Ffree-features-2.png&w=2048&q=75"/></div></div><div class="scroll-card sticky" style="bottom:-40px;z-index:-1;margin-left:30px;margin-right:30px" id="scroll-card-2"><div class="shadow-lg scroll-card-content grid grid-cols-1 bg-stone-50 items-center md:grid-cols-2 gap-6 border border-surface rounded-lg py-16 pr-12 p-2"><div class="row-start-2 md:row-start-1 p-6 px-10"><h3 class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl text-black dark:text-white">AI Agents for Delivering Interfaces</h3><p class="font-sans antialiased mt-2 mb-6 text-lg text-stone-500">Let AI handle the heavy lifting for your UI design - generate fully coded blocks and pages in seconds. Whether you're creating forms or landing pages our AI Agents will simplify your work.</p><ul class="space-y-4"><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">10+ AI Agents - Your Pesonal Consultants</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">AI Blocks Generator - Design prototypes faster</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">AI Pages Generator - Create UIs in seconds</p></li><li class="flex items-center gap-2"><span class="size-5 rounded-full bg-surface text-black dark:text-white grid place-items-center"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-3.5 stroke-2 h-3.5"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><p class="font-sans antialiased text-base text-stone-500">SEO-Ready Content</p></li></ul></div><img alt="blocks" loading="lazy" width="1024" height="1024" decoding="async" data-nimg="1" class="rounded-md md:h-128 object-cover object-center w-full" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind-pro%2Fv3%2Ffree-features-3.png&w=1080&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind-pro%2Fv3%2Ffree-features-3.png&w=2048&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fmaterial-tailwind-pro%2Fv3%2Ffree-features-3.png&w=2048&q=75"/></div></div></div></div></section></div><section class="bg-stone-100 dark:bg-surface-dark py-16 relative" id="exploreComponents"><div class="w-full h-full absolute top-0 left-0 z-0"><div class="container grid grid-cols-6 relative w-full h-full mx-auto"><div class="w-px bg-gradient-to-b from-surface from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-surface from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-surface from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-surface from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-surface from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-surface from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-surface from-50% via-surface to-50% to-transparent bg-[length:1px_9px] absolute right-4 top-0 h-full"></div></div></div><div class="container mx-auto relative z-1"><div class="flex items-end justify-between flex-wrap gap-8 mt-4"><div class="text-start"><h2 class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl text-black dark:text-white">300+ Components for Every Scenario<!-- --> </h2><p class="font-sans antialiased text-xl text-stone-500 max-w-2xl mt-2">David UI's Tailwind CSS components integrate seamlessly, ensuring your projects remain visually competitive and professionally polished. Start building with precision today!</p></div></div><div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 mt-16"><a href="/david-ui/docs/html/accordion"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Accordion" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Faccordion-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Faccordion-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Faccordion-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Accordion</p></div></div></a><a href="/david-ui/docs/html/alert"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Alerts" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Falert-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Falert-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Falert-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Alerts</p></div></div></a><a href="/david-ui/docs/html/avatar"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Avatars" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Favatar-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Favatar-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Favatar-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Avatars</p></div></div></a><a href="/david-ui/docs/html/badge"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Badges" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbadge-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbadge-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbadge-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Badges</p></div></div></a><a href="/david-ui/docs/html/breadcrumb"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Breadcrumbs" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbreadcrumbs-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbreadcrumbs-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbreadcrumbs-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Breadcrumbs</p></div></div></a><a href="/david-ui/docs/html/button"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Buttons" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbutton-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbutton-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbutton-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Buttons</p></div></div></a><a href="/david-ui/docs/html/button-group"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Buttons Group" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbuttongroup-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbuttongroup-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fbuttongroup-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Buttons Group</p></div></div></a><a href="/david-ui/docs/html/card"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Cards" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fcard-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fcard-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fcard-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Cards</p></div></div></a><a href="/david-ui/docs/html/checkbox"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Checkboxes" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fcheckbox-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fcheckbox-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fcheckbox-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Checkboxes</p></div></div></a><a href="/david-ui/docs/html/chip"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Chips" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fchip-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fchip-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fchip-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Chips</p></div></div></a><a href="/david-ui/docs/html/icon-button"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Icon Button" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ficon-button-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ficon-button-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ficon-button-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Icon Button</p></div></div></a><a href="/david-ui/docs/html/input"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Input" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Finput-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Finput-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Finput-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Input</p></div></div></a><a href="/david-ui/docs/html/list"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="List" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Flist-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Flist-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Flist-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">List</p></div></div></a><a href="/david-ui/docs/html/navbar"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Navbar" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fnavbar-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fnavbar-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fnavbar-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Navbar</p></div></div></a><a href="/david-ui/docs/html/progress"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Progress Bar" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fprogress-bar-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fprogress-bar-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fprogress-bar-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Progress Bar</p></div></div></a><a href="/david-ui/docs/html/pagination"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Pagination" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fpagination-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fpagination-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fpagination-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Pagination</p></div></div></a><a href="/david-ui/docs/html/radio"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Radio Button" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fradio-button-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fradio-button-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fradio-button-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Radio Button</p></div></div></a><a href="/david-ui/docs/html/rating"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Rating Bar" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fratingbar-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fratingbar-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fratingbar-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Rating Bar</p></div></div></a><a href="/david-ui/docs/html/spinner"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Spinner" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fspinner-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fspinner-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fspinner-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Spinner</p></div></div></a><a href="/david-ui/docs/html/stepper"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Stepper" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fstepper-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fstepper-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fstepper-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Stepper</p></div></div></a><a href="/david-ui/docs/html/switch"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Switch" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fswitch-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fswitch-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fswitch-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Switch</p></div></div></a><a href="/david-ui/docs/html/textarea"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Text Area" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftext-area-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftext-area-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftext-area-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Text Area</p></div></div></a><a href="/david-ui/docs/html/timeline"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Timeline" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftimeline-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftimeline-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftimeline-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Timeline</p></div></div></a><a href="/david-ui/docs/html/typography"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Typography" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftypography-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftypography-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftypography-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Typography</p></div></div></a><a href="/david-ui/docs/html/footer"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Footer" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ffooter-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ffooter-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ffooter-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Footer</p></div></div></a><a href="/david-ui/docs/html/image"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Image" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fimg-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fimg-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fimg-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Image</p></div></div></a><a href="/david-ui/docs/html/video"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Video" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fvideo-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fvideo-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fvideo-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Video</p></div></div></a><a href="/david-ui/docs/html/sidebar"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Sidebar" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fsidebar-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fsidebar-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Fsidebar-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Sidebar</p></div></div></a><a href="/david-ui/docs/html/table"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 hover:shadow-lg transition-all duration-300"><div class="w-[calc(100%-16px)] h-max rounded m-2 overflow-hidden relative"><img alt="Table" loading="lazy" width="768" height="768" decoding="async" data-nimg="1" class="w-full h-48 object-cover object-center" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftable-thumbnail.jpg&w=828&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftable-thumbnail.jpg&w=1920&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcreativetimofficial%2Fpublic-assets%2Frefs%2Fheads%2Fmaster%2Fdavid-ui%2Fimg%2Ftable-thumbnail.jpg&w=1920&q=75"/></div><div class="w-full h-max rounded px-3.5 py-2.5 pb-4"><p class="font-sans antialiased text-base text-inherit font-medium">Table</p></div></div></a></div></div></section><section class="bg-stone-900"><div class="container mx-auto relative py-24"><div class="w-full h-full absolute top-0 left-0 z-0"><div class="container grid grid-cols-6 relative w-full h-full mx-auto"><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-white/10 from-50% via-surface to-50% to-transparent bg-[length:1px_9px] absolute right-4 top-0 h-full"></div></div></div><div class="relative z-1"><div class="text-center"><h2 class="antialiased font-bold text-3xl md:text-4xl lg:text-5xl dark:text-white mt-6 mb-4 font-bolder tracking-tight text-stone-200">Figma Integration Perfected</h2><p class="font-sans antialiased text-stone-500 text-xl mx-auto max-w-3xl">Access a comprehensive library of components, tokens, variables, and pre-configured auto-layouts for precise alignment and adaptability. The Figma integration ensures consistency and efficiency at every stage of your project.</p></div><div class="max-w-5xl mx-auto mt-12"><img alt="figma design image" loading="lazy" width="1280" height="1280" decoding="async" data-nimg="1" class="w-full rounded-xl" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Fv3.material-tailwind.com%2Ffigma-design.png&w=1920&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Fv3.material-tailwind.com%2Ffigma-design.png&w=3840&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Fv3.material-tailwind.com%2Ffigma-design.png&w=3840&q=75"/></div><div class="mt-12 justify-center flex items-center gap-4"><a target="_blank" class="items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-base py-2.5 px-5 shadow-sm hover:shadow-lg hover:bg-secondary-light relative bg-gradient-to-b from-white to-white border-stone-200 text-stone-700 rounded-lg hover:bg-gradient-to-b hover:from-stone-50 hover:to-stone-50 hover:border-stone-200 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.35),inset_0_-1px_0px_rgba(0,0,0,0.20)] after:pointer-events-none transition antialiased ml-1 flex bg-background" data-shape="default" data-width="default" href="https://www.figma.com/community/file/1449329591340093363/david-ui-open-source-library"><img alt="figma icon" loading="lazy" width="128" height="128" decoding="async" data-nimg="1" class="w-4 h-4 mr-2" style="color:transparent" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/icon/figma.svg"/>Preview Figma</a><a class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-base py-2.5 px-5 shadow-sm hover:shadow-lg bg-primary hover:bg-primary-light relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-primary-foreground rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-shape="default" data-width="default" href="https://www.creative-tim.com/david-ui/docs/html/overview">Get Started</a></div></div></div></section><section class="bg-stone-100"><div class="container mx-auto relative pt-16"><div class="w-full h-full absolute top-0 left-0 z-0"><div class="container grid grid-cols-6 relative w-full h-full mx-auto"><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-200 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-200 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-200 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-200 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-200 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-200 to-50% to-transparent bg-[length:1px_9px]"></div><div class="w-px bg-gradient-to-b from-stone-200 from-50% via-stone-200 to-50% to-transparent bg-[length:1px_9px] absolute right-4 top-0 h-full"></div></div></div><div class="relative z-1"><div class="text-center max-w-3xl mx-auto"><h2 class="font-sans antialiased text-3xl md:text-4xl lg:text-5xl text-black dark:text-white mb-4 font-bold tracking-tight">Trusted by Developers and <br/> Creators Worldwide</h2><p class="font-sans antialiased text-stone-500 mx-auto text-xl">From faster development times to visually stunning results, see why David UI is the go-to choice for building scalable UIs.</p></div><div class="flex items-center justify-center flex-wrap my-12 mt-20"><div class="px-8 text-center"><p class="font-sans antialiased text-sm text-stone-500 mb-2 block">Community Members</p><p class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl text-inherit">2.6M+</p></div><div class="px-8 text-center"><p class="font-sans antialiased text-sm text-stone-500 mb-2 block">Cumulative Downloads</p><p class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl text-inherit">8.6M+</p></div><div class="px-8 text-center"><p class="font-sans antialiased text-sm text-stone-500 mb-2 block">GitHub Cumulative Stars</p><p class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl text-inherit">48,000+</p></div><div class="px-8 text-center"><p class="font-sans antialiased text-sm text-stone-500 mb-2 block">Monthly NPM Downloads</p><p class="font-sans antialiased font-bold text-2xl md:text-3xl lg:text-4xl text-inherit">280,000+</p></div></div><div class="flex gap-16 py-12 items-center justify-center flex-wrap"><img alt="brand logo" loading="lazy" width="512" height="512" decoding="async" data-nimg="1" class="w-20" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Famazon.png&w=640&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Famazon.png&w=1080&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Famazon.png&w=1080&q=75"/><img alt="brand logo" loading="lazy" width="512" height="512" decoding="async" data-nimg="1" class="w-20" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fibm.png&w=640&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fibm.png&w=1080&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fibm.png&w=1080&q=75"/><img alt="brand logo" loading="lazy" width="512" height="512" decoding="async" data-nimg="1" class="w-20" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fmicrosoft.png&w=640&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fmicrosoft.png&w=1080&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fmicrosoft.png&w=1080&q=75"/><img alt="brand logo" loading="lazy" width="512" height="512" decoding="async" data-nimg="1" class="w-20" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fcisco.png&w=640&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fcisco.png&w=1080&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fcisco.png&w=1080&q=75"/><img alt="brand logo" loading="lazy" width="512" height="512" decoding="async" data-nimg="1" class="w-20" style="color:transparent" srcSet="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fatt.png&w=640&q=75 1x, /david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fatt.png&w=1080&q=75 2x" src="/david-ui/_next/image?url=https%3A%2F%2Frawcdn.githack.com%2Fcreativetimofficial%2Fpublic-assets%2Fd8ec9e04279740a9ddff8f2e99288f28839d4d58%2Fmaterial-tailwind-pro%2Ffade-logo%2Fatt.png&w=1080&q=75"/></div></div></div></section><section class="bg-stone-50 dark:bg-surface-dark pt-16" id="roadmap"><div class="container mx-auto"><div class="flex items-end justify-between flex-wrap gap-8"><div class="text-start"><div data-open="true" data-shape="pill" class="relative inline-flex w-max items-center border font-sans font-medium rounded-md data-[shape=pill]:rounded-full text-sm p-0.5 shadow-sm border-secondary text-secondary-foreground bg-background mb-4"><span class="font-inherit text-inherit leading-none my-1 mx-2.5">Roadmap</span></div><h2 class="font-sans antialiased font-bold text-xl md:text-2xl lg:text-3xl text-black dark:text-white">What's Next for David UI</h2><p class="font-sans antialiased text-base md:text-lg text-foreground max-w-2xl mt-4">Explore our journey ahead! The David UI roadmap is designed to deliver powerful new features, enhance developer experiences, and redefine modern UI design.</p></div></div><div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5"><div class="h-max rounded overflow-hidden relative m-0 p-4 w-full"><small class="font-sans antialiased text-sm text-foreground block mb-1">Step 1</small><p class="font-sans antialiased text-base md:text-lg text-black dark:text-white font-semibold">Laying the Foundation</p></div><div class="w-full h-max rounded py-2.5 flex flex-col gap-3 px-4 pb-4 pt-0"><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">300+ Tailwind CSS components</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">300+ React components </small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">Detailed Documentation</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">Responsive UI Implementation</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">Figma Design Files</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">Enhanced Theming</small></div></div></div><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5"><div class="h-max rounded overflow-hidden relative m-0 p-4 w-full"><small class="font-sans antialiased text-sm text-foreground block mb-1">Step 2</small><p class="font-sans antialiased text-base md:text-lg text-black dark:text-white font-semibold">Enhancements & Integrations</p></div><div class="w-full h-max rounded py-2.5 flex flex-col gap-3 px-4 pb-4 pt-0"><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">AI Agent for Generating Blocks</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">AI Agent for Generating Pages</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Accessibility Optimizations</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">100+ Tailwind CSS Components</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Marketing PRO Blocks</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Content PRO Blocks</small></div></div></div><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5"><div class="h-max rounded overflow-hidden relative m-0 p-4 w-full"><small class="font-sans antialiased text-sm text-foreground block mb-1">Step 3</small><p class="font-sans antialiased text-base md:text-lg text-black dark:text-white font-semibold">Advanced Features & Optimizations</p></div><div class="w-full h-max rounded py-2.5 flex flex-col gap-3 px-4 pb-4 pt-0"><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Ecommerce UI Blocks</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Application UI Blocks</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Figma designer files </small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">300+ Vuejs Components</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">300+ Angular Components</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-surface-dark"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Learning Resources for Developers</small></div></div></div></div><div class="grid relative grid-cols-1 md:grid-cols-3 gap-4 mt-4"><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 relative select-none"><div class="absolute inset-0 w-full h-full backdrop-blur z-10"></div><div class="h-max rounded overflow-hidden relative m-0 p-4 w-full"><small class="font-sans antialiased text-sm text-stone-500 block mb-1">Step 1</small><p class="font-sans antialiased text-base md:text-lg text-black dark:text-white font-semibold">Laying the Foundation</p></div><div class="w-full h-max rounded py-2.5 flex flex-col gap-3 px-4 pb-4 pt-0"><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">300+ Tailwind CSS components</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">300+ React components </small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">Detailed Documentation</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">Responsive UI Implementation</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">Figma Design Files</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">Enhanced Theming</small></div></div></div><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 relative select-none"><div class="absolute inset-0 w-full h-full backdrop-blur z-10"></div><div class="h-max rounded overflow-hidden relative m-0 p-4 w-full"><small class="font-sans antialiased text-sm text-stone-500 block mb-1">Step 2</small><p class="font-sans antialiased text-base md:text-lg text-black dark:text-white font-semibold">Enhancements & Integrations</p></div><div class="w-full h-max rounded py-2.5 flex flex-col gap-3 px-4 pb-4 pt-0"><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">AI Agent for Generating Blocks</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-success"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm text-black dark:text-white block font-medium">AI Agent for Generating Pages</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Accessibility Optimizations</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">100+ Tailwind CSS Components</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Marketing PRO Blocks</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Content PRO Blocks</small></div></div></div><div class="w-full rounded-lg border shadow-sm overflow-hidden bg-background border-surface shadow-black/5 relative select-none"><div class="absolute inset-0 w-full h-full backdrop-blur z-10"></div><div class="h-max rounded overflow-hidden relative m-0 p-4 w-full"><small class="font-sans antialiased text-sm text-stone-500 block mb-1">Step 3</small><p class="font-sans antialiased text-base md:text-lg text-black dark:text-white font-semibold">Advanced Features & Optimizations</p></div><div class="w-full h-max rounded py-2.5 flex flex-col gap-3 px-4 pb-4 pt-0"><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Ecommerce UI Blocks</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Application UI Blocks</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Figma designer files </small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">300+ Vuejs Components</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">300+ Angular Components</small></div><div class="flex items-center gap-2"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-[18px] h-[18px] stroke-2 text-stone-500"><path d="M5 13L9 17L19 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg><small class="font-sans antialiased text-sm dark:text-white block font-medium text-foreground/70">Learning Resources for Developers</small></div></div></div><div class="flex justify-center h-full bg-gradient-to-t z-20 absolute bottom-0 left-0 w-full items-end pb-16 from-stone-50 via-stone-50/90 to-stone-50/30 dark:from-stone-50 dark:via-stone-50/90 dark:to-stone-50/50"><a class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-primary hover:bg-primary-light relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-primary-foreground rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased" data-shape="default" data-width="default" href="https://www.creative-tim.com/david-ui/docs/html/overview">Get Started</a></div></div></div></section><footer class="mt-16 bg-stone-50 pb-6 pt-10"><div class="mx-auto max-w-7xl px-5 md:px-0"><div class="flex flex-wrap"><div class="w-full md:w-4/12"><h6 class="font-sans antialiased font-bold text-base md:text-lg lg:text-xl mb-2 text-stone-800">David UI</h6><p class="font-sans antialiased text-stone-500 text-sm">The Ultimate Shortcut to Building High-Converting <br/> UIs using the Power of Tailwind CSS</p><p class="font-sans antialiased text-stone-500 text-sm mt-2">Code Licensed under <a href="/docs/html/license" class="text-stone-800">MIT</a></p><div class="mt-6 flex items-center gap-2"><a target="_blank" class="inline-grid place-items-center border align-middle select-none font-sans font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none data-[shape=circular]:rounded-full text-sm min-w-[38px] min-h-[38px] rounded-md shadow-sm hover:shadow-md bg-transparent border-secondary text-secondary-foreground hover:bg-secondary" data-shape="circular" href="https://www.twitter.com/creativetim?ref=david-ui"><svg width="1.5em" height="1.5em" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-4 h-4"><path d="M16.8198 20.7684L3.75317 3.96836C3.44664 3.57425 3.72749 3 4.22678 3H6.70655C6.8917 3 7.06649 3.08548 7.18016 3.23164L20.2468 20.0316C20.5534 20.4258 20.2725 21 19.7732 21H17.2935C17.1083 21 16.9335 20.9145 16.8198 20.7684Z" stroke="currentColor"></path><path d="M20 3L4 21" stroke="currentColor" stroke-linecap="round"></path></svg></a><a target="_blank" class="inline-grid place-items-center border align-middle select-none font-sans font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none data-[shape=circular]:rounded-full text-sm min-w-[38px] min-h-[38px] rounded-md shadow-sm hover:shadow-md bg-transparent border-secondary text-secondary-foreground hover:bg-secondary" data-shape="circular" href="https://www.github.com/creativetimofficial?ref=david-ui"><svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="w-4 h-4"><path d="M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div></div><div class="md:w-8/12"><div class="items-top mb-6 flex flex-wrap"><div class="w-6/12 pt-6 md:ml-auto md:px-4 md:pt-0 xl:w-3/12"><p class="font-sans antialiased dark:text-white font-semibold text-sm text-stone-800">Company</p><ul class="list-unstyled mt-3"><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-slate-800" href="https://www.creative-tim.com/presentation?ref=david-ui">About Us</a></li><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-slate-800" href="https://www.creative-tim.com/blog?ref=david-ui">Blog</a></li><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-slate-800" href="https://github.com/creativetimofficial?ref=david-ui">Github</a></li><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-slate-800" href="https://www.creative-tim.com/templates/free?ref=david-ui">Free Products</a></li></ul></div><div class="w-6/12 pt-6 md:px-4 md:pt-0 xl:w-3/12"><p class="font-sans antialiased dark:text-white font-semibold text-sm text-stone-800">Help and Support</p><ul class="list-unstyled mt-3"><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-stone-800" href="https://www.creative-tim.com/knowledge-center?ref=david-ui">Knowledge Center</a></li><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-stone-800" href="https://www.creative-tim.com/contact-us?ref=david-ui">Contact Us</a></li><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-stone-800" href="/david-ui/docs/html/overview">Documentation</a></li></ul></div><div class="w-6/12 pt-6 md:px-4 md:pt-0 xl:w-3/12"><p class="font-sans antialiased dark:text-white font-semibold text-sm text-stone-800">Resources</p><ul class="list-unstyled mt-3"><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-stone-800" href="/david-ui/docs/html/overview">HTML</a></li><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-stone-800" href="https://www.creative-tim.com/services/updivision?ref=david-ui">Custom Development</a></li><li><a target="_blank" class="font-sans antialiased text-sm block pb-2 text-stone-500 transition-colors hover:text-stone-800" href="https://www.creative-tim.com/twcomponents/?ref=david-ui">Tailwind Components</a></li></ul></div></div></div></div></div><hr class="my-6 border-stone-200"/><div class="mx-auto max-w-7xl"><div class="flex flex-wrap items-center justify-center gap-2 pb-2 pt-4 text-center"><div class="text-sm mt-2 py-1 text-stone-500 dark:text-white">Copyright 漏 <!-- -->2025<!-- --> <a class="text-inherit transition-colors hover:text-stone-800" href="/david-ui">David UI</a> <!-- -->by<!-- --> <a target="_blank" class="text-inherit transition-colors hover:text-stone-800" href="https://www.creative-tim.com?ref=david-ui">Creative Tim.聽</a>Empowering a Smarter Web.</div></div></div></footer></main><!--/$--><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><script src="https://david-ui.creative-tim.com/david-ui/_next/static/chunks/webpack-215e36c49ba500b4.js" crossorigin="" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"https://david-ui.creative-tim.com/david-ui/_next/static/media/122c360d7fe6d395-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"https://david-ui.creative-tim.com/david-ui/_next/static/media/a34f9d1faa5f3315-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n3:HL[\"https://david-ui.creative-tim.com/david-ui/_next/static/css/075e3758495b2fa5.css\",\"style\",{\"crossOrigin\":\"\"}]\n4:HL[\"https://david-ui.creative-tim.com/david-ui/_next/static/css/45e6da588a52edc6.css\",\"style\",{\"crossOrigin\""])</script><script>self.__next_f.push([1,":\"\"}]\n0:\"$L5\"\n"])</script><script>self.__next_f.push([1,"6:HL[\"https://david-ui.creative-tim.com/david-ui/_next/static/css/ba4806fb7aec8e42.css\",\"style\",{\"crossOrigin\":\"\"}]\n"])</script><script>self.__next_f.push([1,"7:I[79421,[],\"\"]\n9:I[39525,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"36961\",\"static/chunks/36961-1d5b16852874a655.js\",\"41931\",\"static/chunks/app/page-e47ca361262080b5.js\"],\"NavbarLanding\"]\na:I[76804,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a9a29f8-d4338eb6"])</script><script>self.__next_f.push([1,"d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"36961\",\"static/chunks/36961-1d5b16852874a655.js\",\"41931\",\"static/chunks/app/page-e47ca361262080b5.js\"],\"Hero\"]\nb:I[41846,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js\",\"39525\",\"stati"])</script><script>self.__next_f.push([1,"c/chunks/39525-82cd29d7ed4ae7c4.js\",\"36961\",\"static/chunks/36961-1d5b16852874a655.js\",\"41931\",\"static/chunks/app/page-e47ca361262080b5.js\"],\"Frameworks\"]\nc:I[62769,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"36961\",\"static/chunks/36961-1d5b16852874a655.js\",\"41931\",\"static/chunks/app/page-e47ca3"])</script><script>self.__next_f.push([1,"61262080b5.js\"],\"Features\"]\nd:I[86936,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"36961\",\"static/chunks/36961-1d5b16852874a655.js\",\"41931\",\"static/chunks/app/page-e47ca361262080b5.js\"],\"ExploreComponents\"]\ne:I[48669,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a"])</script><script>self.__next_f.push([1,"9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"36961\",\"static/chunks/36961-1d5b16852874a655.js\",\"41931\",\"static/chunks/app/page-e47ca361262080b5.js\"],\"Figma\"]\nf:I[74905,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js"])</script><script>self.__next_f.push([1,"\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"36961\",\"static/chunks/36961-1d5b16852874a655.js\",\"41931\",\"static/chunks/app/page-e47ca361262080b5.js\"],\"Testimonials\"]\n10:I[55791,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"36961\",\"static/chunks/36961-1d5b16852874a655.js\",\"41931\",\"static/chu"])</script><script>self.__next_f.push([1,"nks/app/page-e47ca361262080b5.js\"],\"Roadmap\"]\n11:I[39525,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"36961\",\"static/chunks/36961-1d5b16852874a655.js\",\"41931\",\"static/chunks/app/page-e47ca361262080b5.js\"],\"Footer\"]\n12:I[47289,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/"])</script><script>self.__next_f.push([1,"chunks/4a9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f091.js\",\"5045\",\"static/chunks/5045-c2731ef882b42d3a.js\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"63185\",\"static/chunks/app/layout-09de93f2482c3fe6.js\"],\"\"]\n13:I[99313,[\"77436\",\"static/chunks/dda25572-22595321c43831c1.js\",\"74669\",\"static/chunks/4a9a29f8-d4338eb6d52b97ea.js\",\"79398\",\"static/chunks/6e51eac4-78df8063c5b07660.js\",\"37079\",\"static/chunks/37079-2ed54e7b7316f0"])</script><script>self.__next_f.push([1,"91.js\",\"5045\",\"static/chunks/5045-c2731ef882b42d3a.js\",\"39525\",\"static/chunks/39525-82cd29d7ed4ae7c4.js\",\"63185\",\"static/chunks/app/layout-09de93f2482c3fe6.js\"],\"\"]\n14:\"$Sreact.suspense\"\n15:I[34074,[],\"\"]\n16:I[63972,[],\"\"]\n18:I[26421,[],\"\"]\n19:[]\n"])</script><script>self.__next_f.push([1,"5:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://david-ui.creative-tim.com/david-ui/_next/static/css/075e3758495b2fa5.css\",\"precedence\":\"next\",\"crossOrigin\":\"\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"https://david-ui.creative-tim.com/david-ui/_next/static/css/45e6da588a52edc6.css\",\"precedence\":\"next\",\"crossOrigin\":\"\"}]],[\"$\",\"$L7\",null,{\"buildId\":\"e9aBC-dnVhAMqNPjj1A99\",\"assetPrefix\":\"https://david-ui.creative-tim.com/david-ui\",\"initialCanonicalUrl\":\"/\",\"initialTree\":[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"__PAGE__\",{},[\"$L8\",[\"$\",\"main\",null,{\"children\":[[\"$\",\"$L9\",null,{}],[\"$\",\"$La\",null,{}],[\"$\",\"div\",null,{\"className\":\"bg-gradient-to-b from-stone-100 to-stone-300\",\"children\":[[\"$\",\"$Lb\",null,{}],[\"$\",\"$Lc\",null,{\"title\":\"Built for the Future of Development\",\"description\":\"Discover the difference our AI and Tailwind CSS features can bring to your web projects with solutions designed for today's coding needs.\",\"data\":[{\"title\":\"Built on Tailwind CSS\",\"description\":\"Currently we support Tailwind CSS. Every component in the library is lightweight and flexible. Follow us for updates!\",\"image\":\"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/free-features-1.png\",\"options\":[\"Tailwind CSS - ready now\",\"Figma - ready now\",\"React - soon\",\"Vuejs - soon\",\"Angular - soon\"]},{\"title\":\"300+ Ready to Use Components\",\"description\":\"Skip repetitive tasks and focus on your core application logic to deliver stunning results out of the box.\",\"image\":\"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/free-features-2.png\",\"options\":[\"Buttons, Inputs, Tables, Cards and more\",\"Figma Design Files Included\",\"Responsive \u0026 Customizable\",\"Light \u0026 Dark Mode (coming soon)\",\"Easy Integration with Existing Projects\"]},{\"title\":\"AI Agents for Delivering Interfaces\",\"description\":\"Let AI handle the heavy lifting for your UI design - generate fully coded blocks and pages in seconds. Whether you're creating forms or landing pages our AI Agents will simplify your work.\",\"image\":\"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/material-tailwind-pro/v3/free-features-3.png\",\"options\":[\"10+ AI Agents - Your Pesonal Consultants\",\"AI Blocks Generator - Design prototypes faster\",\"AI Pages Generator - Create UIs in seconds\",\"SEO-Ready Content\"]}]}]]}],[\"$\",\"$Ld\",null,{}],[\"$\",\"$Le\",null,{}],[\"$\",\"$Lf\",null,{}],[\"$\",\"$L10\",null,{}],[\"$\",\"$L11\",null,{}]]}],null]]},[null,[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__className_2614bb scroll-smooth\",\"children\":[[\"$\",\"$L12\",null,{\"id\":\"gtm-script\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(w, d, s, l, i) {\\n w[l] = w[l] || []\\n w[l].push({ \\\"gtm.start\\\": new Date().getTime(), event: \\\"gtm.js\\\" })\\n const f = d.getElementsByTagName(s)[0],\\n j = d.createElement(s),\\n dl = l != \\\"dataLayer\\\" ? \\\"\u0026l=\\\" + l : \\\"\\\"\\n j.async = true\\n j.src = \\\"https://www.googletagmanager.com/gtm.js?id=\\\" + i + dl\\n f.parentNode.insertBefore(j, f)\\n })(window,document,'script','dataLayer',\\\"GTM-NKDMSK6\\\")\"}}],[\"$\",\"body\",null,{\"className\":\"h-screen w-screen bg-background bg-stone-50\",\"children\":[[\"$\",\"link\",null,{\"rel\":\"stylesheet\",\"type\":\"text/css\",\"href\":\"https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800,900|Noto+Serif:300,400,500,600,700\"}],[\"$\",\"noscript\",null,{\"children\":[\"$\",\"iframe\",null,{\"src\":\"https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6\",\"height\":\"0\",\"width\":\"0\",\"style\":{\"display\":\"none\",\"visibility\":\"hidden\"}}]}],[\"$\",\"$L13\",null,{\"children\":[\"$\",\"$14\",null,{\"children\":[\"$\",\"$L15\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"loading\":\"$undefined\",\"loadingStyles\":\"$undefined\",\"loadingScripts\":\"$undefined\",\"hasLoading\":false,\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L16\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"https://david-ui.creative-tim.com/david-ui/_next/static/css/ba4806fb7aec8e42.css\",\"precedence\":\"next\",\"crossOrigin\":\"\"}]]}]}]}]]}]]}],null]],\"initialHead\":[false,\"$L17\"],\"globalErrorComponent\":\"$18\",\"missingSlots\":\"$W19\"}]]\n"])</script><script>self.__next_f.push([1,"17:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"The Ultimate Free Tailwind CSS Components Library | David UI\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Access David UI's free library of Tailwind CSS and React components. Build modern UIs with ease and flexibility.\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://www.creative-tim.com/david-ui\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"The Ultimate Free Tailwind CSS Components Library | David UI\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"Access David UI's free library of Tailwind CSS and React components. Build modern UIs with ease and flexibility.\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:url\",\"content\":\"https://www.creative-tim.com/david-ui\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:title\",\"content\":\"The Ultimate Free Tailwind CSS Components Library | David UI\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:description\",\"content\":\"Access David UI's free library of Tailwind CSS and React components. Build modern UIs with ease and flexibility.\"}],[\"$\",\"meta\",\"11\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"8:null\n"])</script><script>self.__next_f.push([1,""])</script></body></html>