Glass Blur Navbar

Launching v2.0 this week

Ship UI 10× Faster
With Zero Effort

Stop wrestling with CSS. Copy production-ready components.

Frosted glass top nav with animated mobile menu — ready for any landing page

T

glass-blur-navbar.tsx

1	"use client";
2	import { useState } from "react";
3
4	export function Navbar() {
5	const [open, setOpen] = useState(false);
6	return (
7	<>
8	<nav "color:#79c0ff">className="fixed top-0 inset-x-0 z-50 flex items-center justify-between px-6 py-4"
9	"color:#79c0ff">style={{ background: "rgba(4,4,13,0.8)", backdropFilter: "blur(20px)", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
10	<div "color:#79c0ff">className="flex items-center gap-2">
11	<div "color:#79c0ff">className="h-8 w-8 rounded-xl flex items-center justify-center text-white text-sm font-black"
12	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)" }}>⬡</div>
13	<span "color:#79c0ff">className="text-base font-black text-white">Brand</span>
14	</div>
15	<div "color:#79c0ff">className="hidden md:flex items-center gap-6">
16	{["Features","Pricing","Docs","Blog"].map(l => (
17	<a "color:#79c0ff">key={l} "color:#79c0ff">href="#" "color:#79c0ff">className="text-sm text-white/50 hover:text-white transition-colors">{l}</a>
18	))}
19	</div>
20	<div "color:#79c0ff">className="hidden md:flex items-center gap-2">
21	<a "color:#79c0ff">href="#" "color:#79c0ff">className="px-4 py-2 text-sm font-bold text-white/60 hover:text-white">Log in</a>
22	<a "color:#79c0ff">href="#" "color:#79c0ff">className="rounded-xl px-5 py-2 text-sm font-black text-white"
23	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)" }}>Get Started →</a>
24	</div>
25	<button "color:#79c0ff">onClick={() => setOpen(!open)} "color:#79c0ff">className="flex md:hidden flex-col gap-1.5 p-1">
26	<span "color:#79c0ff">className={`block h-0.5 w-5 rounded-full bg-white transition-all duration-300 ${open ? "rotate-45 translate-y-2" : ""}`} />
27	<span "color:#79c0ff">className={`block h-0.5 w-5 rounded-full bg-white transition-all duration-200 ${open ? "opacity-0" : ""}`} />
28	<span "color:#79c0ff">className={`block h-0.5 w-5 rounded-full bg-white transition-all duration-300 ${open ? "-rotate-45 -translate-y-2" : ""}`} />
29	</button>
30	</nav>
31	<div "color:#79c0ff">className={`fixed inset-x-0 top-[60px] z-40 overflow-hidden transition-all duration-300 ${open ? "max-h-64" : "max-h-0"}`}
32	"color:#79c0ff">style={{ background: "rgba(4,4,13,0.95)", backdropFilter: "blur(20px)", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
33	<div "color:#79c0ff">className="flex flex-col gap-1 px-6 py-4">
34	{["Features","Pricing","Docs","Blog"].map(l => (
35	<a "color:#79c0ff">key={l} "color:#79c0ff">href="#" "color:#79c0ff">className="rounded-xl px-3 py-2.5 text-sm font-medium text-white/60 hover:text-white hover:bg-white/6 transition-all">{l}</a>
36	))}
37	<a "color:#79c0ff">href="#" "color:#79c0ff">className="mt-2 w-full rounded-xl py-3 text-sm font-black text-white text-center"
38	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)" }}>Get Started →</a>
39	</div>
40	</div>
41	</>
42	);
43	}

⬡ UIDrop Component43 lines

TypeScript ReactUTF-8

Minimal Dark Navbar

The UI toolkit
designers dream of.

Copy. Paste. Ship.

Ultra-clean dark navbar with glow CTA — perfect for SaaS & product sites

T

minimal-dark-navbar.tsx

1	export function Navbar() {
2	return (
3	<nav "color:#79c0ff">className="flex items-center justify-between px-8 py-5">
4	<span "color:#79c0ff">className="text-lg font-black text-white tracking-tight">brand.</span>
5	<div "color:#79c0ff">className="flex items-center gap-7">
6	{["Product","Pricing","Changelog","Blog"].map(l => (
7	<a "color:#79c0ff">key={l} "color:#79c0ff">href="#" "color:#79c0ff">className="text-sm text-slate-400 hover:text-white transition-colors">{l}</a>
8	))}
9	</div>
10	<div "color:#79c0ff">className="flex items-center gap-3">
11	<a "color:#79c0ff">href="#" "color:#79c0ff">className="text-sm font-medium text-slate-400 hover:text-white">Sign in</a>
12	<a "color:#79c0ff">href="#" "color:#79c0ff">className="group relative rounded-xl px-5 py-2 text-sm font-black text-white overflow-hidden"
13	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)", boxShadow: "0 0 30px rgba(99,102,241,0.4)" }}>
14	<span "color:#79c0ff">className="relative z-10">Start free trial</span>
15	<div "color:#79c0ff">className="absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors" />
16	</a>
17	</div>
18	</nav>
19	);
20	}

⬡ UIDrop Component20 lines

TypeScript ReactUTF-8

App Sidebar Navigation

⬡

Nexus

AK

Alex Kumar

Pro Plan

Dashboard

Overview for March 2026

Search...

Revenue↑12%

$48.2K

Users↑8%

12.4K

Full sidebar for SaaS dashboards — icons, badges, active state, user footer

T

app-sidebar-navigation.tsx

1	"use client";
2	import { useState } from "react";
3
4	const links = [
5	{ label: "Dashboard", icon: "📊" },
6	{ label: "Analytics", icon: "📈" },
7	{ label: "Users", icon: "👥", badge: "12" },
8	{ label: "Billing", icon: "💳" },
9	{ label: "Settings", icon: "⚙️" },
10	];
11
12	export function Sidebar() {
13	const [active, setActive] = useState("Dashboard");
14	return (
15	<aside "color:#79c0ff">className="flex h-screen w-60 flex-col py-5 px-3"
16	"color:#79c0ff">style={{ background: "#07070f", borderRight: "1px solid rgba(255,255,255,0.06)" }}>
17	<div "color:#79c0ff">className="flex items-center gap-2.5 px-3 mb-7">
18	<div "color:#79c0ff">className="flex h-8 w-8 items-center justify-center rounded-xl text-white"
19	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)" }}>⬡</div>
20	<span "color:#79c0ff">className="text-sm font-black text-white">Nexus</span>
21	</div>
22	<nav "color:#79c0ff">className="flex flex-col gap-0.5 flex-1">
23	{links.map(link => {
24	const isActive = active === link.label;
25	return (
26	<button "color:#79c0ff">key={link.label} "color:#79c0ff">onClick={() => setActive(link.label)}
27	"color:#79c0ff">className="group flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-left transition-all"
28	"color:#79c0ff">style={{
29	background: isActive ? "rgba(99,102,241,0.15)" : "transparent",
30	border: isActive ? "1px solid rgba(99,102,241,0.25)" : "1px solid transparent",
31	}}>
32	<div "color:#79c0ff">className="flex items-center gap-3">
33	<span>{link.icon}</span>
34	<span "color:#79c0ff">className="text-sm font-semibold transition-colors"
35	"color:#79c0ff">style={{ color: isActive ? "white" : "rgba(255,255,255,0.4)" }}>
36	{link.label}
37	</span>
38	</div>
39	{link.badge && (
40	<span "color:#79c0ff">className="rounded-full px-2 py-0.5 text-[10px] font-black"
41	"color:#79c0ff">style={{ background: "rgba(99,102,241,0.2)", color: "#818cf8" }}>
42	{link.badge}
43	</span>
44	)}
45	</button>
46	);
47	})}
48	</nav>
49	<div "color:#79c0ff">className="mt-auto pt-4" "color:#79c0ff">style={{ borderTop: "1px solid rgba(255,255,255,0.05)" }}>
50	<div "color:#79c0ff">className="flex items-center gap-3 rounded-xl px-3 py-2.5"
51	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.03)" }}>
52	<div "color:#79c0ff">className="flex h-8 w-8 items-center justify-center rounded-full text-xs font-black text-white"
53	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#ec4899,#8b5cf6)" }}>AK</div>
54	<div>
55	<p "color:#79c0ff">className="text-sm font-bold text-white/80">Alex Kumar</p>
56	<p "color:#79c0ff">className="text-xs text-white/35">Pro Plan</p>
57	</div>
58	</div>
59	</div>
60	</aside>
61	);
62	}

⬡ UIDrop Component62 lines

TypeScript ReactUTF-8

Dashboard Top Bar

⬡

Search anything...⌘K

3

AK

$48.2K

Revenue↑12%

12.4K

Users↑8%

98.9%

Uptime↑0.2%

App topbar with search, notifications, user menu — for dashboard layouts

T

dashboard-top-bar.tsx

1	{/* Full dashboard topbar */}

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Store Navbar

🚚 Free shipping over $99|📦 Track your order|💳 Buy now, pay later

All Women Men Electronics Home Sale 🔥

New Collection

Spring Drop
2026

👗

Full e-commerce nav with search, cart counter, category links & promo bar

T

store-navbar.tsx

1	"use client";
2	import { useState } from "react";
3
4	export function StoreNav() {
5	const [cart, setCart] = useState(2);
6	return (
7	<header>
8	{/* Promo bar */}
9	<div "color:#79c0ff">className="flex items-center justify-center gap-6 py-2 text-xs font-medium text-white" "color:#79c0ff">style={{ background: "#1a1a2e" }}>
10	<span>🚚 Free shipping over $99</span>
11	<span>\|</span>
12	<span>💳 Buy now, pay later</span>
13	</div>
14	{/* Main nav */}
15	<nav "color:#79c0ff">className="flex items-center gap-4 px-6 py-3 border-b border-zinc-100">
16	<div "color:#79c0ff">className="flex items-center gap-2 mr-3">
17	<div "color:#79c0ff">className="h-8 w-8 rounded-xl flex items-center justify-center text-white text-sm font-black"
18	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#f59e0b,#ef4444)" }}>S</div>
19	<span "color:#79c0ff">className="text-base font-black text-slate-900">Shop</span>
20	</div>
21	{/* Search */}
22	<div "color:#79c0ff">className="flex-1 flex items-center gap-2 rounded-xl px-4 py-2 bg-zinc-100">
23	<SearchIcon />
24	<input "color:#79c0ff">className="flex-1 bg-transparent text-sm text-slate-600 placeholder-slate-400 outline-none" "color:#79c0ff">placeholder="Search products..." />
25	</div>
26	{/* Cart */}
27	<button "color:#79c0ff">onClick={() => setCart(c => c + 1)} "color:#79c0ff">className="relative flex h-10 w-10 items-center justify-center rounded-xl hover:bg-zinc-100 transition-all">
28	<CartIcon />
29	{cart > 0 && <span "color:#79c0ff">className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-black text-white">{cart}</span>}
30	</button>
31	</nav>
32	{/* Categories */}
33	<div "color:#79c0ff">className="flex items-center gap-6 px-6 py-2 border-b border-zinc-100">
34	{["All","Women","Men","Electronics","Home","Sale 🔥"].map(c => (
35	<a "color:#79c0ff">key={c} "color:#79c0ff">href="#" "color:#79c0ff">className="text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors whitespace-nowrap"
36	"color:#79c0ff">style={{ color: c === "Sale 🔥" ? "#ef4444" : undefined }}>{c}</a>
37	))}
38	</div>
39	</header>
40	);
41	}

⬡ UIDrop Component41 lines

TypeScript ReactUTF-8

Minimal Shop Header

New Arrivals · Spring 2026

Minimal Wardrobe.
Maximum Impact.

Clean white shop header with logo, categories and wishlist/cart icons

T

minimal-shop-header.tsx

1	{/* Minimal e-commerce header */}

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Mobile Bottom Tab Bar

Good morning, Alex 👋

Thursday, March 18, 2026

💰

$4,200

Balance

📈

82%

Portfolio

iOS/Android-style bottom navigation with active indicator and badge

T

mobile-bottom-tab-bar.tsx

1	"use client";
2	import { useState } from "react";
3
4	const links = [
5	{ label: "Home", icon: HomeIcon },
6	{ label: "Search", icon: SearchIcon },
7	{ label: "Notify", icon: BellIcon, badge: 3 },
8	{ label: "Profile", icon: UserIcon },
9	];
10
11	export function BottomNav() {
12	const [active, setActive] = useState("Home");
13	return (
14	<nav "color:#79c0ff">className="fixed bottom-4 inset-x-4 flex items-center justify-around rounded-2xl px-2 py-3 z-50"
15	"color:#79c0ff">style={{ background: "rgba(4,4,13,0.85)", backdropFilter: "blur(20px)", border: "1px solid rgba(255,255,255,0.09)" }}>
16	{links.map(link => {
17	const isActive = active === link.label;
18	return (
19	<button "color:#79c0ff">key={link.label} "color:#79c0ff">onClick={() => setActive(link.label)}
20	"color:#79c0ff">className="relative flex flex-col items-center gap-1 px-4 py-1.5 rounded-xl transition-all duration-200"
21	"color:#79c0ff">style={{ background: isActive ? "rgba(139,92,246,0.2)" : "transparent" }}>
22	<link.icon "color:#79c0ff">className="h-5 w-5" "color:#79c0ff">style={{ color: isActive ? "#a78bfa" : "rgba(255,255,255,0.3)" }} />
23	<span "color:#79c0ff">className="text-[9px] font-bold" "color:#79c0ff">style={{ color: isActive ? "#a78bfa" : "rgba(255,255,255,0.25)" }}>
24	{link.label}
25	</span>
26	{link.badge && !isActive && (
27	<span "color:#79c0ff">className="absolute -top-1 right-0 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[8px] font-black text-white">
28	{link.badge}
29	</span>
30	)}
31	</button>
32	);
33	})}
34	</nav>
35	);
36	}

⬡ UIDrop Component36 lines

TypeScript ReactUTF-8

Mobile Slide Drawer Menu

⬡

Brand

AK

Alex Kumar

Pro Member

🏠 Home

📊 Dashboard

💳 Billing

👥 Team

⚙️ Settings

Dashboard

$48K

Revenue

12K

Users

Full-screen drawer navigation with animated hamburger and user profile

T

mobile-slide-drawer-menu.tsx

1	{/* Animated mobile drawer */}

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Documentation Navigation

⬡

UIDrop Docsv2.4

Search docs...⌘K

GitHub ↗

Installation Quick Start Configuration

Docs›Getting Started›Installation

Installation

$ npm install uidrop

Import components from the uidrop package and start building immediately without any configuration.

Full docs site nav — top bar, sidebar with collapsible sections, breadcrumb

T

documentation-navigation.tsx

1	{/* Full docs navigation */}

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Blog & Article Header

Design·5 min read·Mar 18, 2026

Glassmorphism is Back — And It's Better Than Ever

Why frosted glass UI is dominating product design in 2026, and how to implement it without the performance hit...

Blog navbar with reading progress bar and share actions

T

blog-&-article-header.tsx

1	{/* Blog navbar with progress */}

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Mega Dropdown Navigation

Products Mega Menu Preview

🎨

UI Components

300+ copy-paste components

🖼️

Theme Library

Premium website themes

⚡

NextGen

3D immersive experiences

📊

Dashboard Kit

Admin & analytics UI

Desktop mega menu with product categories, featured items and CTA

T

mega-dropdown-navigation.tsx

1	{/* Mega menu with product grid */}

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Settings Page Sidebar

Account

Profile

Security

Notifications

Workspace

Team

Billing

API Keys

Danger

Delete Account

Profile Settings

AK

Alex Kumar

alex@uidrop.dev

Full Name

Alex Kumar

Email

alex@uidrop.dev

Profile/settings section sidebar with grouped links and danger zone

T

settings-page-sidebar.tsx

1	{/* Settings sidebar nav */}

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Scroll-Aware Sticky Navbar

← Transparent at top

↑ Frosted glass after scroll

This navbar transitions from fully transparent to frosted glass as the user scrolls. The reading progress bar fills left-to-right based on scroll position.

Transparent at top → frosted glass on scroll — with progress indicator

T

scroll-aware-sticky-navbar.tsx

1	"use client";
2	import { useEffect, useState } from "react";
3
4	export function ScrollNav() {
5	const [scrolled, setScrolled] = useState(false);
6	const [progress, setProgress] = useState(0);
7
8	useEffect(() => {
9	const onScroll = () => {
10	const scrolled = window.scrollY > 40;
11	const progress = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
12	setScrolled(scrolled);
13	setProgress(Math.min(progress, 100));
14	};
15	window.addEventListener("scroll", onScroll);
16	return () => window.removeEventListener("scroll", onScroll);
17	}, []);
18
19	return (
20	<nav "color:#79c0ff">className="fixed top-0 inset-x-0 z-50 transition-all duration-500"
21	"color:#79c0ff">style={{
22	background: scrolled ? "rgba(4,4,13,0.85)" : "transparent",
23	backdropFilter: scrolled ? "blur(20px)" : "none",
24	borderBottom: scrolled ? "1px solid rgba(255,255,255,0.08)" : "none",
25	}}>
26	{/* Reading progress bar */}
27	<div "color:#79c0ff">className="absolute bottom-0 left-0 h-0.5 bg-violet-500 transition-all duration-100"
28	"color:#79c0ff">style={{ width: `${progress}%` }} />
29	...
30	</nav>
31	);
32	}

⬡ UIDrop Component32 lines

TypeScript ReactUTF-8

Animated Tab Indicator Navbar

Component Library

Browse by category

Button

Card

Form

Badge

Alert

Table

Sliding underline/pill indicator with smooth transition between tabs

T

animated-tab-indicator-navbar.tsx

1	{/* Animated sliding indicator */}

⬡ UIDrop Component1 lines

TypeScript ReactUTF-8

Navbars

Ship UI 10× Faster
With Zero Effort

The UI toolkit
designers dream of.

Dashboard

Spring Drop
2026

Minimal Wardrobe.
Maximum Impact.

Installation

Glassmorphism is Back — And It's Better Than Ever

Profile Settings

Component Library

Navbars

Ship UI 10× Faster
With Zero Effort

The UI toolkit
designers dream of.

Dashboard

Spring Drop
2026

Minimal Wardrobe.
Maximum Impact.

Installation

Glassmorphism is Back — And It's Better Than Ever

Profile Settings

Component Library

Navbars

Ship UI 10× FasterWith Zero Effort

The UI toolkitdesigners dream of.

Dashboard

Spring Drop2026

Minimal Wardrobe.Maximum Impact.

Installation

Glassmorphism is Back — And It's Better Than Ever

Profile Settings

Component Library

Navbars

Ship UI 10× FasterWith Zero Effort

The UI toolkitdesigners dream of.

Dashboard

Spring Drop2026

Minimal Wardrobe.Maximum Impact.

Installation

Glassmorphism is Back — And It's Better Than Ever

Profile Settings

Component Library

Ship UI 10× Faster
With Zero Effort

The UI toolkit
designers dream of.

Spring Drop
2026

Minimal Wardrobe.
Maximum Impact.

Ship UI 10× Faster
With Zero Effort

The UI toolkit
designers dream of.

Spring Drop
2026

Minimal Wardrobe.
Maximum Impact.