SaaS & DashboardUI Component Pack

<div class="p-5 rounded-xl bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800"> <div class="flex items-center justify-between"> <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Monthly Recurring Revenue</span> <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"> +12.5% </span> </div> <div class="mt-3 flex items-baseline justify-between"> <span class="text-3xl font-extrabold text-gray-900 dark:text-white">$84,290</span> </div></div>

<div class="flex items-start gap-3"> <div class="w-8 h-8 rounded-full bg-brand-500/10 text-brand-500 flex items-center justify-center shrink-0"> <i data-lucide="git-commit" class="w-4 h-4"></i> </div> <div class="flex-1"> <p class="text-sm font-medium text-gray-900 dark:text-white">Deployed commit #a82f1b</p> <p class="text-xs text-gray-500">12 mins ago</p> </div></div>

<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-600 border border-emerald-500/20"> <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Operational (99.99%)</span>

<div class="w-full h-3 rounded-full bg-gray-200 dark:bg-gray-800 overflow-hidden flex"> <div class="bg-brand-500 h-full w-[45%]"></div> <div class="bg-purple-500 h-full w-[15%]"></div> <div class="bg-amber-500 h-full w-[8%]"></div></div>

<svg viewBox="0 0 36 36" class="w-20 h-20 -rotate-90"> <path class="text-gray-200" stroke-width="3.5" stroke="currentColor" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="text-brand-500" stroke-dasharray="82, 100" stroke-width="3.5" stroke-linecap="round" stroke="currentColor" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /></svg>

<button onclick="toggleCommandPalette(true)" class="flex items-center justify-between p-3 rounded-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800"> <span class="flex items-center gap-2 text-sm font-medium">Search commands...</span> <kbd class="font-mono text-xs bg-white dark:bg-gray-800 px-2 py-1 rounded">⌘K</kbd></button>

<a href="#" class="flex items-center justify-between px-3.5 py-2.5 rounded-lg bg-brand-50 text-brand-600 font-medium text-sm"> <div class="flex items-center gap-3"> <i data-lucide="inbox" class="w-4 h-4"></i> <span>Support Inbox</span> </div> <span class="px-2 py-0.5 text-xs font-bold rounded-full bg-brand-500 text-white">12</span></a>

<nav class="flex items-center gap-2 text-sm text-gray-500"> <a href="#" class="hover:text-brand-500">Home</a> <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> <span class="font-semibold text-gray-900">API Tokens</span></nav>

<div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <span class="w-7 h-7 rounded-full bg-emerald-500 text-white flex items-center justify-center text-xs font-bold">✓</span> <span class="text-xs font-medium">Account</span> </div> <div class="flex-1 h-0.5 bg-emerald-500 mx-2"></div> <div class="flex items-center gap-2"> <span class="w-7 h-7 rounded-full bg-brand-600 text-white flex items-center justify-center text-xs font-bold">2</span> <span class="text-xs font-medium">Billing</span> </div></div>

<div class="inline-flex p-1 bg-gray-100 dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800"> <button class="px-4 py-1.5 text-xs font-medium rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm">Overview</button> <button class="px-4 py-1.5 text-xs font-medium text-gray-500 hover:text-gray-900">Analytics</button></div>

<button class="w-12 h-6 rounded-full bg-brand-600 p-1"> <div class="w-4 h-4 rounded-full bg-white transform translate-x-6 transition-transform"></div></button>

<div class="p-4 rounded-xl bg-gray-900 text-white flex items-center justify-between"> <div class="flex items-center gap-3"> <i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-400"></i> <span class="text-xs">Deploy Successful</span> </div> <button class="px-3 py-1 text-xs bg-gray-800 rounded-lg">View</button></div>

<div class="p-3 rounded-xl border border-gray-200 dark:border-gray-800 flex items-center justify-between bg-gray-50 dark:bg-gray-900"> <div class="flex items-center gap-3"> <div class="w-10 h-10 rounded-full bg-indigo-500 text-white font-bold flex items-center justify-center">AC</div> <div> <h5 class="text-sm font-semibold">Alex Chen</h5> <p class="text-xs text-gray-500">alex@company.com</p> </div> </div></div>

<div class="flex items-center gap-2"> <input type="password" value="nx_live_9f83a21b8c09d" readonly class="flex-1 px-3.5 py-2 text-xs font-mono bg-gray-100 dark:bg-gray-900 border border-gray-200 rounded-lg"> <button class="px-3 py-2 text-xs font-medium bg-brand-600 text-white rounded-lg">Copy</button></div>

<div class="text-center p-8"> <div class="w-12 h-12 rounded-full bg-brand-500/10 text-brand-500 mx-auto flex items-center justify-center"> <i data-lucide="folder-plus" class="w-6 h-6"></i> </div> <h4 class="text-sm font-semibold mt-3">No Webhooks Configured</h4></div>

<div class="p-5 rounded-xl border border-brand-500/30"> <h4 class="text-base font-bold">Pro Developer Plan</h4> <div class="mt-2 text-3xl font-extrabold">$49 <span class="text-xs text-gray-500">/mo</span></div></div>