Glass navbars, tabs with sliding indicators, sidebars with live active states, a macOS-style dock and working pagination — click everything.
Glass Navbar
Frosted glass over the page, animated link underlines, notification dot and gradient CTA.
| 1 | <header "color:#79c0ff">className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.05] px-5 py-3 backdrop-blur-xl"> |
| 2 | {/* logo */} |
| 3 | <a "color:#79c0ff">className="flex items-center gap-2.5" "color:#79c0ff">href="#"> |
| 4 | <span "color:#79c0ff">className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-violet-600 to-indigo-600 text-sm font-black text-white shadow-lg shadow-violet-500/30">U</span> |
| 5 | <span "color:#79c0ff">className="text-sm font-extrabold text-white">UIDrops</span> |
| 6 | </a> |
| 7 | |
| 8 | {/* links with animated underline */} |
| 9 | <nav "color:#79c0ff">className="hidden items-center gap-6 md:flex"> |
| 10 | {["Components", "Templates", "Pricing", "Docs"].map((l) => ( |
| 11 | <a "color:#79c0ff">key={l} "color:#79c0ff">href="#" |
| 12 | "color:#79c0ff">className="group relative text-sm font-medium text-white/60 transition hover:text-white"> |
| 13 | {l} |
| 14 | <span "color:#79c0ff">className="absolute -bottom-1 left-0 h-px w-0 bg-gradient-to-r from-violet-400 to-cyan-400 transition-all duration-300 group-hover:w-full" /> |
| 15 | </a> |
| 16 | ))} |
| 17 | </nav> |
| 18 | |
| 19 | <div "color:#79c0ff">className="flex items-center gap-3"> |
| 20 | {/* bell with dot */} |
| 21 | <button "color:#79c0ff">className="relative flex h-9 w-9 items-center justify-center rounded-xl text-white/50 transition hover:bg-white/8 hover:text-white"> |
| 22 | <BellIcon "color:#79c0ff">className="h-4.5 w-4.5" /> |
| 23 | <span "color:#79c0ff">className="absolute right-2 top-2 h-2 w-2 rounded-full bg-rose-500 ring-2 ring-[#0b0b16]" /> |
| 24 | </button> |
| 25 | <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 px-4 py-2 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:shadow-violet-500/50"> |
| 26 | Get started |
| 27 | </button> |
| 28 | </div> |
| 29 | </header> |
Animated Underline Tabs
Showing Overview panel
The indicator slides between tabs using CSS transforms — no measurement code needed.
| 1 | function UnderlineTabs() { |
| 2 | const tabs = ["Overview", "Analytics", "Reports", "Settings"]; |
| 3 | const [active, setActive] = useState(0); |
| 4 | |
| 5 | return ( |
| 6 | <div "color:#79c0ff">className="relative border-b border-white/10"> |
| 7 | <div "color:#79c0ff">className="flex"> |
| 8 | {tabs.map((t, i) => ( |
| 9 | <button "color:#79c0ff">key={t} "color:#79c0ff">onClick={() => setActive(i)} |
| 10 | "color:#79c0ff">className={"flex-1 px-4 pb-3 pt-2 text-sm font-semibold transition-colors " + |
| 11 | (active === i ? "text-white" : "text-white/40 hover:text-white/70")}> |
| 12 | {t} |
| 13 | </button> |
| 14 | ))} |
| 15 | </div> |
| 16 | {/* sliding indicator: width = 100/n %, translateX = active × 100% */} |
| 17 | <span |
| 18 | "color:#79c0ff">className="absolute bottom-0 left-0 h-0.5 rounded-full bg-gradient-to-r from-violet-500 to-cyan-400 transition-transform duration-300" |
| 19 | "color:#79c0ff">style={{ |
| 20 | width: 100 / tabs.length + "%", |
| 21 | transform: "translateX(" + active * 100 + "%)", |
| 22 | }} |
| 23 | /> |
| 24 | </div> |
| 25 | ); |
| 26 | } |
Pill Tabs with Badges
Rounded pill tabs with icons and count badges — active pill gets the gradient.
| 1 | function PillTabs() { |
| 2 | const tabs = [ |
| 3 | { label: "Inbox", count: 12 }, |
| 4 | { label: "Sent", count: 0 }, |
| 5 | { label: "Drafts", count: 3 }, |
| 6 | { label: "Spam", count: 0 }, |
| 7 | ]; |
| 8 | const [active, setActive] = useState(0); |
| 9 | |
| 10 | return ( |
| 11 | <div "color:#79c0ff">className="flex flex-wrap gap-2"> |
| 12 | {tabs.map((t, i) => ( |
| 13 | <button "color:#79c0ff">key={t.label} "color:#79c0ff">onClick={() => setActive(i)} |
| 14 | "color:#79c0ff">className={"flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all " + |
| 15 | (active === i |
| 16 | ? "bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-lg shadow-violet-500/30" |
| 17 | : "bg-white/[0.05] text-white/50 ring-1 ring-inset ring-white/10 hover:text-white")}> |
| 18 | {t.label} |
| 19 | {t.count > 0 && ( |
| 20 | <span "color:#79c0ff">className={"rounded-full px-1.5 py-0.5 text-[10px] font-bold " + |
| 21 | (active === i ? "bg-white/20 text-white" : "bg-violet-500/20 text-violet-300")}> |
| 22 | {t.count} |
| 23 | </span> |
| 24 | )} |
| 25 | </button> |
| 26 | ))} |
| 27 | </div> |
| 28 | ); |
| 29 | } |
Sidebar Navigation
Sectioned sidebar with live active states, count badges, and a usage meter pinned to the bottom.
| 1 | function Sidebar() { |
| 2 | const [active, setActive] = useState("Dashboard"); |
| 3 | const sections = [ |
| 4 | { title: "Main", items: [ |
| 5 | { name: "Dashboard", icon: HomeIcon }, |
| 6 | { name: "Projects", icon: FolderIcon, count: 8 }, |
| 7 | { name: "Tasks", icon: CheckIcon, count: 24 }, |
| 8 | ]}, |
| 9 | { title: "Workspace", items: [ |
| 10 | { name: "Members", icon: UsersIcon }, |
| 11 | { name: "Settings", icon: CogIcon }, |
| 12 | ]}, |
| 13 | ]; |
| 14 | |
| 15 | return ( |
| 16 | <aside "color:#79c0ff">className="w-60 rounded-2xl border border-white/10 bg-white/[0.03] p-3"> |
| 17 | {sections.map((s) => ( |
| 18 | <div "color:#79c0ff">key={s.title} "color:#79c0ff">className="mb-2"> |
| 19 | <p "color:#79c0ff">className="px-3 pb-1.5 pt-2 text-[10px] font-bold uppercase tracking-widest text-white/25">{s.title}</p> |
| 20 | {s.items.map((it) => ( |
| 21 | <button "color:#79c0ff">key={it.name} "color:#79c0ff">onClick={() => setActive(it.name)} |
| 22 | "color:#79c0ff">className={"flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-all " + |
| 23 | (active === it.name |
| 24 | ? "bg-gradient-to-r from-violet-600/90 to-indigo-600/90 text-white shadow-lg shadow-violet-500/20" |
| 25 | : "text-white/50 hover:bg-white/[0.05] hover:text-white")}> |
| 26 | <it.icon "color:#79c0ff">className="h-4 w-4" /> |
| 27 | <span "color:#79c0ff">className="flex-1 text-left">{it.name}</span> |
| 28 | {it.count && <span "color:#79c0ff">className="rounded-full bg-white/10 px-1.5 text-[10px] font-bold">{it.count}</span>} |
| 29 | </button> |
| 30 | ))} |
| 31 | </div> |
| 32 | ))} |
| 33 | {/* usage meter */} |
| 34 | <div "color:#79c0ff">className="mt-3 rounded-xl border border-white/8 bg-white/[0.03] p-3"> |
| 35 | <div "color:#79c0ff">className="flex justify-between text-[11px]"> |
| 36 | <span "color:#79c0ff">className="text-white/45">Storage</span><span "color:#79c0ff">className="font-bold text-white/70">7.2/10 GB</span> |
| 37 | </div> |
| 38 | <div "color:#79c0ff">className="mt-1.5 h-1.5 rounded-full bg-white/8"> |
| 39 | <div "color:#79c0ff">className="h-full w-[72%] rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500" /> |
| 40 | </div> |
| 41 | </div> |
| 42 | </aside> |
| 43 | ); |
| 44 | } |
Breadcrumbs
Slash, chevron-with-icons and pill-contained variants for wayfinding.
| 1 | {/* slash style */} |
| 2 | <nav "color:#79c0ff">className="flex items-center gap-2 text-sm"> |
| 3 | <a "color:#79c0ff">href="#" "color:#79c0ff">className="text-white/40 hover:text-white">Home</a> |
| 4 | <span "color:#79c0ff">className="text-white/20">/</span> |
| 5 | <a "color:#79c0ff">href="#" "color:#79c0ff">className="text-white/40 hover:text-white">Components</a> |
| 6 | <span "color:#79c0ff">className="text-white/20">/</span> |
| 7 | <span "color:#79c0ff">className="font-semibold text-violet-300">Navigation</span> |
| 8 | </nav> |
| 9 | |
| 10 | {/* pill style */} |
| 11 | <nav "color:#79c0ff">className="inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/[0.04] px-2 py-1.5"> |
| 12 | <a "color:#79c0ff">href="#" "color:#79c0ff">className="rounded-full px-2.5 py-1 text-xs text-white/45 hover:bg-white/8 hover:text-white">🏠 Home</a> |
| 13 | <ChevronIcon "color:#79c0ff">className="h-3 w-3 text-white/20" /> |
| 14 | <a "color:#79c0ff">href="#" "color:#79c0ff">className="rounded-full px-2.5 py-1 text-xs text-white/45 hover:bg-white/8 hover:text-white">Library</a> |
| 15 | <ChevronIcon "color:#79c0ff">className="h-3 w-3 text-white/20" /> |
| 16 | <span "color:#79c0ff">className="rounded-full bg-violet-500/15 px-2.5 py-1 text-xs font-semibold text-violet-300">Data</span> |
| 17 | </nav> |
Pagination
Working page state with prev/next, ellipsis and an active gradient pill.
| 1 | function Pagination({ total = 12 }: { total?: number }) { |
| 2 | const [page, setPage] = useState(3); |
| 3 | const pages = [1, 2, 3, 4, 5]; |
| 4 | |
| 5 | return ( |
| 6 | <div "color:#79c0ff">className="flex items-center gap-1.5"> |
| 7 | <button |
| 8 | "color:#79c0ff">onClick={() => setPage(Math.max(1, page - 1))} |
| 9 | "color:#79c0ff">disabled={page === 1} |
| 10 | "color:#79c0ff">className="flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 text-white/50 transition hover:bg-white/5 hover:text-white disabled:opacity-25" |
| 11 | >←</button> |
| 12 | |
| 13 | {pages.map((p) => ( |
| 14 | <button "color:#79c0ff">key={p} "color:#79c0ff">onClick={() => setPage(p)} |
| 15 | "color:#79c0ff">className={"h-9 w-9 rounded-xl text-sm font-semibold transition-all " + |
| 16 | (page === p |
| 17 | ? "bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-lg shadow-violet-500/30" |
| 18 | : "text-white/50 hover:bg-white/5 hover:text-white")}> |
| 19 | {p} |
| 20 | </button> |
| 21 | ))} |
| 22 | |
| 23 | <span "color:#79c0ff">className="px-1 text-white/25">…</span> |
| 24 | <button "color:#79c0ff">onClick={() => setPage(total)} |
| 25 | "color:#79c0ff">className={"h-9 w-9 rounded-xl text-sm font-semibold " + |
| 26 | (page === total ? "bg-gradient-to-r from-violet-600 to-indigo-600 text-white" : "text-white/50 hover:bg-white/5")}> |
| 27 | {total} |
| 28 | </button> |
| 29 | |
| 30 | <button |
| 31 | "color:#79c0ff">onClick={() => setPage(Math.min(total, page + 1))} |
| 32 | "color:#79c0ff">disabled={page === total} |
| 33 | "color:#79c0ff">className="flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 text-white/50 transition hover:bg-white/5 hover:text-white disabled:opacity-25" |
| 34 | >→</button> |
| 35 | </div> |
| 36 | ); |
| 37 | } |
Bottom Mobile Nav
Five-slot mobile bar with a raised gradient FAB and glowing active state — tap the icons.
| 1 | function BottomNav() { |
| 2 | const [active, setActive] = useState("home"); |
| 3 | const items = [ |
| 4 | { id: "home", icon: HomeIcon, label: "Home" }, |
| 5 | { id: "search", icon: SearchIcon, label: "Search" }, |
| 6 | { id: "add", fab: true }, |
| 7 | { id: "inbox", icon: InboxIcon, label: "Inbox", dot: true }, |
| 8 | { id: "profile", icon: UserIcon, label: "Profile" }, |
| 9 | ]; |
| 10 | |
| 11 | return ( |
| 12 | <nav "color:#79c0ff">className="flex w-72 items-end justify-between rounded-3xl border border-white/10 bg-[#0d0d1a]/95 px-5 pb-3 pt-2.5 shadow-2xl backdrop-blur"> |
| 13 | {items.map((it) => |
| 14 | it.fab ? ( |
| 15 | <button "color:#79c0ff">key={it.id} |
| 16 | "color:#79c0ff">className="-mt-7 flex h-13 w-13 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 text-white shadow-xl shadow-violet-500/40 transition hover:scale-105 active:scale-95"> |
| 17 | <PlusIcon "color:#79c0ff">className="h-5.5 w-5.5" /> |
| 18 | </button> |
| 19 | ) : ( |
| 20 | <button "color:#79c0ff">key={it.id} "color:#79c0ff">onClick={() => setActive(it.id)} |
| 21 | "color:#79c0ff">className={"relative flex flex-col items-center gap-1 px-1 transition " + |
| 22 | (active === it.id ? "text-violet-300" : "text-white/35 hover:text-white/60")}> |
| 23 | {it.dot && <span "color:#79c0ff">className="absolute -right-0.5 top-0 h-1.5 w-1.5 rounded-full bg-rose-500" />} |
| 24 | <it.icon "color:#79c0ff">className="h-5 w-5" /> |
| 25 | <span "color:#79c0ff">className="text-[9px] font-semibold">{it.label}</span> |
| 26 | {active === it.id && <span "color:#79c0ff">className="h-1 w-1 rounded-full bg-violet-400 shadow-[0_0_8px_rgba(167,139,250,0.9)]" />} |
| 27 | </button> |
| 28 | ) |
| 29 | )} |
| 30 | </nav> |
| 31 | ); |
| 32 | } |
macOS-Style Dock
Icons magnify on hover with a tooltip label and running-app dots — pure CSS, no JS.
| 1 | <nav "color:#79c0ff">className="flex items-end gap-2 rounded-3xl border border-white/10 bg-white/[0.05] px-4 py-3 backdrop-blur-xl"> |
| 2 | {apps.map((app) => ( |
| 3 | <button "color:#79c0ff">key={app.name} |
| 4 | "color:#79c0ff">className="group relative flex h-12 w-12 items-center justify-center rounded-2xl text-xl shadow-lg transition-all duration-200 hover:-translate-y-3 hover:scale-125" |
| 5 | "color:#79c0ff">style={{ background: app.gradient }}> |
| 6 | {app.emoji} |
| 7 | {/* tooltip */} |
| 8 | <span "color:#79c0ff">className="pointer-events-none absolute -top-9 whitespace-nowrap rounded-lg bg-black/80 px-2.5 py-1 text-[10px] font-semibold text-white opacity-0 backdrop-blur transition-all group-hover:opacity-100"> |
| 9 | {app.name} |
| 10 | </span> |
| 11 | {/* running dot */} |
| 12 | {app.running && <span "color:#79c0ff">className="absolute -bottom-2 h-1 w-1 rounded-full bg-white/60" />} |
| 13 | </button> |
| 14 | ))} |
| 15 | </nav> |