Glassmorphism

Frosted glass, backdrop blur, and depth layers. Copy components that actually look glass — not just grey boxes.

components

Glass CTA Section

The fastest way to ship UI

Build products
10× faster.

Copy-paste 300+ production-ready components

Hero-style section with primary, secondary and ghost glass buttons on gradient background

glass-cta-section.tsx

1	// Glass CTA Buttons — copy this whole section
2	export function GlassCTASection() {
3	return (
4	<section "color:#79c0ff">className="relative overflow-hidden rounded-3xl px-8 py-14 text-center"
5	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#1e1040,#2d1b69,#4c1d95,#831843)" }}>
6	<h2 "color:#79c0ff">className="text-3xl font-black text-white mb-2">Build products 10× faster</h2>
7	<p "color:#79c0ff">className="text-white/50 mb-8 text-sm">Copy-paste 300+ production-ready components</p>
8	<div "color:#79c0ff">className="flex flex-wrap items-center justify-center gap-3">
9	{/* Primary glass button */}
10	<button "color:#79c0ff">className="rounded-2xl px-7 py-3 text-sm font-black text-white transition-all hover:scale-105"
11	"color:#79c0ff">style={{
12	background: "rgba(255,255,255,0.18)",
13	backdropFilter: "blur(16px)",
14	border: "1px solid rgba(255,255,255,0.3)",
15	boxShadow: "0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2)"
16	}}>
17	Get Started Free →
18	</button>
19	{/* Secondary glass button */}
20	<button "color:#79c0ff">className="rounded-2xl px-7 py-3 text-sm font-bold text-white/70 transition-all hover:text-white"
21	"color:#79c0ff">style={{
22	background: "rgba(255,255,255,0.05)",
23	backdropFilter: "blur(16px)",
24	border: "1px solid rgba(255,255,255,0.12)"
25	}}>
26	Watch Demo
27	</button>
28	{/* Ghost button */}
29	<button "color:#79c0ff">className="rounded-2xl px-7 py-3 text-sm font-bold text-white/50 transition-all hover:text-white hover:bg-white/8">
30	View Pricing
31	</button>
32	</div>
33	</section>
34	);
35	}

⬡ UIDrop Component35 lines

TypeScript ReactUTF-8

Glass Action Toolbar

Article page — toolbar floats at bottom

Floating glass action bar with icon buttons — use in article pages, editors or dashboards

glass-action-toolbar.tsx

1	export function GlassToolbar() {
2	const actions = [
3	{ icon: "Share", label: "Share" },
4	{ icon: "Bookmark", label: "Save" },
5	{ icon: "Heart", label: "Like" },
6	{ icon: "Chat", label: "Comment" },
7	{ icon: "More", label: "More" },
8	];
9	return (
10	<div "color:#79c0ff">className="flex items-center gap-1 rounded-2xl px-3 py-2.5"
11	"color:#79c0ff">style={{
12	background: "rgba(255,255,255,0.08)",
13	backdropFilter: "blur(24px)",
14	border: "1px solid rgba(255,255,255,0.15)",
15	boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
16	}}>
17	{actions.map(action => (
18	<button "color:#79c0ff">key={action.label}
19	"color:#79c0ff">className="flex items-center gap-1.5 rounded-xl px-3 py-2 text-xs font-medium text-white/60 transition-all hover:bg-white/10 hover:text-white">
20	<ActionIcon "color:#79c0ff">name={action.icon} />
21	<span "color:#79c0ff">className="hidden sm:inline">{action.label}</span>
22	</button>
23	))}
24	</div>
25	);
26	}

⬡ UIDrop Component26 lines

TypeScript ReactUTF-8

Glass Profile Card

Sarah Johnson

Senior Product Designer · SF

Crafting delightful digital experiences at the intersection of design and engineering.

248

Projects

12.4K

Followers

99%

Rate

Social profile card with gradient banner, avatar, bio, stats and follow button

glass-profile-card.tsx

1	export function GlassProfileCard() {
2	return (
3	<div "color:#79c0ff">className="w-full max-w-sm overflow-hidden rounded-3xl"
4	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.08)", backdropFilter: "blur(24px)", border: "1px solid rgba(255,255,255,0.15)" }}>
5	{/* Banner */}
6	<div "color:#79c0ff">className="h-28 w-full"
7	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899)" }} />
8	{/* Avatar */}
9	<div "color:#79c0ff">className="relative -mt-10 px-5 pb-5">
10	<div "color:#79c0ff">className="flex items-end justify-between">
11	<div "color:#79c0ff">className="h-20 w-20 rounded-2xl border-4 overflow-hidden flex items-center justify-center text-2xl font-black text-white"
12	"color:#79c0ff">style={{ borderColor: "rgba(255,255,255,0.1)", background: "linear-gradient(135deg,#1e1b4b,#312e81)" }}>
13	SJ
14	</div>
15	<button "color:#79c0ff">className="mb-2 rounded-xl px-5 py-2 text-sm font-black text-white transition-all hover:opacity-90"
16	"color:#79c0ff">style={{ background: "rgba(99,102,241,0.6)", backdropFilter: "blur(10px)", border: "1px solid rgba(99,102,241,0.4)" }}>
17	Follow
18	</button>
19	</div>
20	<div "color:#79c0ff">className="mt-3">
21	<h3 "color:#79c0ff">className="text-lg font-black text-white">Sarah Johnson</h3>
22	<p "color:#79c0ff">className="text-xs text-white/50 mt-0.5">Senior Product Designer · San Francisco</p>
23	<p "color:#79c0ff">className="text-xs text-white/35 mt-2 leading-relaxed">
24	Crafting delightful digital experiences at the intersection of design and engineering.
25	</p>
26	</div>
27	<div "color:#79c0ff">className="mt-4 grid grid-cols-3 divide-x"
28	"color:#79c0ff">style={{ borderColor: "rgba(255,255,255,0.08)", background: "rgba(255,255,255,0.04)", borderRadius: "16px", overflow: "hidden", border: "1px solid rgba(255,255,255,0.08)" }}>
29	{[["248","Projects"],["12.4K","Followers"],["99%","Rate"]].map(([v, l]) => (
30	<div "color:#79c0ff">key={l} "color:#79c0ff">className="py-3 text-center">
31	<p "color:#79c0ff">className="text-sm font-black text-white">{v}</p>
32	<p "color:#79c0ff">className="text-[9px] text-white/35">{l}</p>
33	</div>
34	))}
35	</div>
36	</div>
37	</div>
38	);
39	}

⬡ UIDrop Component39 lines

TypeScript ReactUTF-8

Glass Pricing Card

Pro Plan

$29/mo

POPULAR

300+ components

Commercial license

TypeScript support

Dark mode included

Priority support

Pro plan pricing card with feature list, glassmorphism styling and gradient CTA

glass-pricing-card.tsx

1	export function GlassPricingCard() {
2	return (
3	<div "color:#79c0ff">className="relative overflow-hidden w-full max-w-xs rounded-3xl p-7"
4	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.08)", backdropFilter: "blur(24px)", border: "1px solid rgba(255,255,255,0.18)" }}>
5	{/* Glow */}
6	<div "color:#79c0ff">className="pointer-events-none absolute -top-12 -right-12 h-32 w-32 rounded-full blur-[60px] opacity-40"
7	"color:#79c0ff">style={{ background: "#6366f1" }} />
8	<div "color:#79c0ff">className="relative">
9	<div "color:#79c0ff">className="flex items-center justify-between mb-6">
10	<div>
11	<p "color:#79c0ff">className="text-[10px] font-black uppercase tracking-widest text-violet-400">Pro Plan</p>
12	<div "color:#79c0ff">className="mt-2 flex items-baseline gap-1">
13	<span "color:#79c0ff">className="text-4xl font-black text-white">$29</span>
14	<span "color:#79c0ff">className="text-sm text-white/40">/month</span>
15	</div>
16	</div>
17	<div "color:#79c0ff">className="rounded-2xl px-3 py-1.5 text-[10px] font-black text-yellow-400"
18	"color:#79c0ff">style={{ background: "rgba(234,179,8,0.1)", border: "1px solid rgba(234,179,8,0.2)" }}>
19	POPULAR
20	</div>
21	</div>
22	<div "color:#79c0ff">className="space-y-3 mb-7">
23	{["300+ components","Commercial license","TypeScript support","Dark mode included","Priority support"].map(f => (
24	<div "color:#79c0ff">key={f} "color:#79c0ff">className="flex items-center gap-2.5">
25	<div "color:#79c0ff">className="flex h-5 w-5 items-center justify-center rounded-full"
26	"color:#79c0ff">style={{ background: "rgba(34,197,94,0.15)", border: "1px solid rgba(34,197,94,0.3)" }}>
27	<svg "color:#79c0ff">className="h-3 w-3 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
28	<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/>
29	</svg>
30	</div>
31	<span "color:#79c0ff">className="text-sm text-white/70">{f}</span>
32	</div>
33	))}
34	</div>
35	<button "color:#79c0ff">className="w-full rounded-2xl py-3.5 text-sm font-black text-white transition-all hover:opacity-90"
36	"color:#79c0ff">style={{ background: "linear-gradient(135deg,rgba(99,102,241,0.8),rgba(139,92,246,0.7))", backdropFilter: "blur(10px)", border: "1px solid rgba(139,92,246,0.4)" }}>
37	Get Pro Access →
38	</button>
39	</div>
40	</div>
41	);
42	}

⬡ UIDrop Component42 lines

TypeScript ReactUTF-8

Glass Login Form

Welcome back

alex@uidrop.dev

••••••••••

Remember meForgot password?

or continue with

Full-page glass auth form with social login, password visibility toggle, remember me

glass-login-form.tsx

1	"use client";
2	import { useState } from "react";
3
4	export function GlassLoginForm() {
5	const [showPass, setShowPass] = useState(false);
6	return (
7	<div "color:#79c0ff">className="flex min-h-screen items-center justify-center px-4"
8	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#1e1040,#2d1b69,#4c1d95,#831843)" }}>
9	<div "color:#79c0ff">className="w-full max-w-sm rounded-3xl p-7"
10	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.1)", backdropFilter: "blur(24px)", border: "1px solid rgba(255,255,255,0.18)" }}>
11	<div "color:#79c0ff">className="mb-6 text-center">
12	<div "color:#79c0ff">className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl"
13	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.18)" }}>
14	<UserIcon />
15	</div>
16	<h2 "color:#79c0ff">className="text-xl font-black text-white">Welcome back</h2>
17	<p "color:#79c0ff">className="text-xs text-white/45 mt-1">Sign in to your account</p>
18	</div>
19	{/* Email */}
20	<div "color:#79c0ff">className="flex items-center gap-3 rounded-xl px-4 py-3 mb-3"
21	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.1)" }}>
22	<MailIcon />
23	<input "color:#79c0ff">placeholder="Email address" "color:#79c0ff">className="flex-1 bg-transparent text-sm text-white placeholder-white/30 outline-none" />
24	</div>
25	{/* Password */}
26	<div "color:#79c0ff">className="flex items-center gap-3 rounded-xl px-4 py-3 mb-3"
27	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.1)" }}>
28	<LockIcon />
29	<input "color:#79c0ff">type={showPass ? "text" : "password"} "color:#79c0ff">placeholder="Password"
30	"color:#79c0ff">className="flex-1 bg-transparent text-sm text-white placeholder-white/30 outline-none" />
31	<button "color:#79c0ff">onClick={() => setShowPass(!showPass)} "color:#79c0ff">className="text-white/30 hover:text-white/60 transition-colors">
32	<EyeIcon open={showPass} />
33	</button>
34	</div>
35	<button "color:#79c0ff">className="w-full rounded-2xl py-3 text-sm font-black text-white mt-2 mb-4 transition-all hover:opacity-90"
36	"color:#79c0ff">style={{ background: "linear-gradient(135deg,rgba(99,102,241,0.8),rgba(139,92,246,0.7))", border: "1px solid rgba(139,92,246,0.3)" }}>
37	Sign In
38	</button>
39	<div "color:#79c0ff">className="flex items-center gap-3 mb-4">
40	<div "color:#79c0ff">className="flex-1 h-px" "color:#79c0ff">style={{ background: "rgba(255,255,255,0.1)" }} />
41	<span "color:#79c0ff">className="text-[10px] text-white/30">or</span>
42	<div "color:#79c0ff">className="flex-1 h-px" "color:#79c0ff">style={{ background: "rgba(255,255,255,0.1)" }} />
43	</div>
44	<div "color:#79c0ff">className="flex gap-2">
45	{["Google","Twitter","GitHub"].map(s => (
46	<button "color:#79c0ff">key={s} "color:#79c0ff">className="flex-1 rounded-xl py-2.5 text-xs font-bold text-white/55 hover:text-white transition-all"
47	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.08)" }}>
48	{s[0]}
49	</button>
50	))}
51	</div>
52	</div>
53	</div>
54	);
55	}

⬡ UIDrop Component55 lines

TypeScript ReactUTF-8

Glass Newsletter Signup

✉️

Stay in the loop

Weekly UI tips, component drops & design inspiration.

1,248 designers already joined · No spam

Email subscription card with social proof count and animated submit — for landing pages

glass-newsletter-signup.tsx

1	export function GlassNewsletter() {
2	return (
3	<div "color:#79c0ff">className="flex min-h-[300px] items-center justify-center px-5 py-10"
4	"color:#79c0ff">style={{ background: "radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.3) 0%, transparent 60%), #04040d" }}>
5	<div "color:#79c0ff">className="w-full max-w-sm rounded-3xl px-7 py-8 text-center"
6	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.07)", backdropFilter: "blur(24px)", border: "1px solid rgba(255,255,255,0.12)" }}>
7	<div "color:#79c0ff">className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl text-2xl"
8	"color:#79c0ff">style={{ background: "rgba(99,102,241,0.2)", border: "1px solid rgba(99,102,241,0.3)" }}>
9	✉️
10	</div>
11	<h3 "color:#79c0ff">className="text-xl font-black text-white mb-2">Stay in the loop</h3>
12	<p "color:#79c0ff">className="text-sm text-white/40 mb-6">Get weekly UI tips, component drops, and design inspiration.</p>
13	<div "color:#79c0ff">className="flex gap-2 rounded-2xl p-1.5"
14	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)" }}>
15	<input "color:#79c0ff">placeholder="your@email.com"
16	"color:#79c0ff">className="flex-1 bg-transparent pl-3 text-sm text-white placeholder-white/25 outline-none" />
17	<button "color:#79c0ff">className="shrink-0 rounded-xl px-5 py-2 text-sm font-black text-white transition-all hover:opacity-90"
18	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)" }}>
19	Subscribe
20	</button>
21	</div>
22	<p "color:#79c0ff">className="mt-4 text-xs text-white/25">Join 1,248 designers & devs · No spam</p>
23	</div>
24	</div>
25	);
26	}

⬡ UIDrop Component26 lines

TypeScript ReactUTF-8

Glass Navbar

New: Components v2.0 →

Build UI
10× faster

300+ production-ready React components with full TypeScript support and dark mode.

Frosted glass navbar in full hero context — transparent bg becomes frosted on scroll

glass-navbar.tsx

1	"use client";
2	import { useState } from "react";
3
4	export function GlassNavbar() {
5	const [open, setOpen] = useState(false);
6	return (
7	<div "color:#79c0ff">style={{ background: "linear-gradient(135deg,#0f172a,#1e1b4b,#312e81)" }}>
8	<nav "color:#79c0ff">className="flex items-center justify-between px-6 py-4 relative z-10"
9	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.05)", 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">Nexus</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="flex items-center gap-2">
21	<button "color:#79c0ff">className="rounded-xl px-4 py-2 text-sm font-bold text-white/50 hover:text-white transition-colors">Log in</button>
22	<button "color:#79c0ff">className="rounded-xl px-5 py-2 text-sm font-black text-white transition-all hover:opacity-90"
23	"color:#79c0ff">style={{ background: "linear-gradient(135deg,rgba(99,102,241,0.8),rgba(139,92,246,0.7))", border: "1px solid rgba(139,92,246,0.4)", backdropFilter: "blur(10px)" }}>
24	Get Started
25	</button>
26	</div>
27	</nav>
28	</div>
29	);
30	}

⬡ UIDrop Component30 lines

TypeScript ReactUTF-8

Glass Tab Navigation

Project Overview

Tasks done

In progress

$48K

Budget

98%

Health

Glass pill tabs with animated active indicator — for dashboards, settings, profiles

glass-tab-navigation.tsx

1	"use client";
2	import { useState } from "react";
3
4	export function GlassTabs() {
5	const [active, setActive] = useState(0);
6	const tabs = ["Overview","Analytics","Team","Settings"];
7	return (
8	<div "color:#79c0ff">className="rounded-3xl overflow-hidden"
9	"color:#79c0ff">style={{ background: "linear-gradient(135deg,#0f1e3d,#1e3a5f,#065f46)" }}>
10	<div "color:#79c0ff">className="px-5 pt-5 pb-0">
11	<div "color:#79c0ff">className="flex gap-1 rounded-2xl p-1"
12	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.08)" }}>
13	{tabs.map((tab, i) => (
14	<button "color:#79c0ff">key={tab} "color:#79c0ff">onClick={() => setActive(i)}
15	"color:#79c0ff">className="flex-1 rounded-xl py-2.5 text-xs font-bold transition-all"
16	"color:#79c0ff">style={{
17	background: active === i ? "rgba(255,255,255,0.12)" : "transparent",
18	backdropFilter: active === i ? "blur(8px)" : "none",
19	border: active === i ? "1px solid rgba(255,255,255,0.15)" : "1px solid transparent",
20	color: active === i ? "white" : "rgba(255,255,255,0.35)",
21	}}>
22	{tab}
23	</button>
24	))}
25	</div>
26	</div>
27	<div "color:#79c0ff">className="p-5">{/* Tab content */}</div>
28	</div>
29	);
30	}

⬡ UIDrop Component30 lines

TypeScript ReactUTF-8

Glass Notification Center

Notifications

4 unread

💳

Payment successful

$99 charged to Visa •••4242

2m ago

👥

Sarah mentioned you

Great work on the new dashboard!

15m ago

⚡

Deploy completed

nexus-app production v2.4.1

1h ago

💬

New comment

Alex replied to your post

3h ago

Full notification panel with unread dots, time stamps, and mark all read

glass-notification-center.tsx

1	"use client";
2	import { useState } from "react";
3
4	const NOTIFS = [
5	{ icon: "💳", title: "Payment successful", desc: "$99 charged to Visa •••4242", time: "2m ago", color: "#22c55e" },
6	{ icon: "👥", title: "Sarah mentioned you", desc: "Great work on the new dashboard!", time: "15m ago", color: "#6366f1" },
7	{ icon: "⚡", title: "Deploy completed", desc: "nexus-app production v2.4.1", time: "1h ago", color: "#f59e0b" },
8	{ icon: "💬", title: "New comment", desc: "Alex replied to your post", time: "3h ago", color: "#ec4899" },
9	];
10
11	export function GlassNotifications() {
12	const [read, setRead] = useState(false);
13	return (
14	<div "color:#79c0ff">className="w-full max-w-sm rounded-3xl overflow-hidden"
15	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.08)", backdropFilter: "blur(24px)", border: "1px solid rgba(255,255,255,0.15)" }}>
16	<div "color:#79c0ff">className="flex items-center justify-between px-5 py-4"
17	"color:#79c0ff">style={{ borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
18	<h3 "color:#79c0ff">className="text-sm font-black text-white">Notifications</h3>
19	<button "color:#79c0ff">onClick={() => setRead(!read)} "color:#79c0ff">className="text-xs font-bold text-violet-400 hover:text-violet-300">
20	{read ? "Mark unread" : "Mark all read"}
21	</button>
22	</div>
23	{NOTIFS.map((n, i) => (
24	<div "color:#79c0ff">key={i} "color:#79c0ff">className="flex items-start gap-3 px-5 py-3.5 hover:bg-white/5 transition-colors"
25	"color:#79c0ff">style={{ borderBottom: i < NOTIFS.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none" }}>
26	<div "color:#79c0ff">className="relative shrink-0">
27	<div "color:#79c0ff">className="flex h-10 w-10 items-center justify-center rounded-2xl text-lg"
28	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.1)" }}>
29	{n.icon}
30	</div>
31	{!read && <div "color:#79c0ff">className="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full border-2"
32	"color:#79c0ff">style={{ background: n.color, borderColor: "#0a0a16" }} />}
33	</div>
34	<div "color:#79c0ff">className="flex-1 min-w-0">
35	<p "color:#79c0ff">className="text-xs font-bold text-white">{n.title}</p>
36	<p "color:#79c0ff">className="text-[10px] text-white/40 mt-0.5 truncate">{n.desc}</p>
37	</div>
38	<span "color:#79c0ff">className="text-[9px] text-white/25 shrink-0 mt-0.5">{n.time}</span>
39	</div>
40	))}
41	</div>
42	);
43	}

⬡ UIDrop Component43 lines

TypeScript ReactUTF-8

Glass Status Badges

System Status

All systems go

APIoperational99.98%

Dashboardoperational99.99%

Webhooksdegraded97.4%

CDNoperational100%

Databasemaintenance99.9%

System status page with live service health indicators — for status/uptime pages

glass-status-badges.tsx

1	export function GlassStatusPage() {
2	const services = [
3	{ name: "API", status: "operational", uptime: "99.98%" },
4	{ name: "Dashboard", status: "operational", uptime: "99.99%" },
5	{ name: "Webhooks", status: "degraded", uptime: "97.4%" },
6	{ name: "CDN", status: "operational", uptime: "100%" },
7	{ name: "Database", status: "maintenance", uptime: "99.9%" },
8	];
9	const colors = { operational: "#22c55e", degraded: "#f59e0b", maintenance: "#6366f1" };
10	return (
11	<div "color:#79c0ff">className="w-full max-w-sm rounded-3xl overflow-hidden"
12	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.06)", backdropFilter: "blur(20px)", border: "1px solid rgba(255,255,255,0.1)" }}>
13	{services.map(s => (
14	<div "color:#79c0ff">key={s.name} "color:#79c0ff">className="flex items-center gap-3 px-5 py-3.5"
15	"color:#79c0ff">style={{ borderBottom: "1px solid rgba(255,255,255,0.05)" }}>
16	<div "color:#79c0ff">className="h-2 w-2 rounded-full" "color:#79c0ff">style={{ background: colors[s.status as keyof typeof colors], boxShadow: `0 0 6px ${colors[s.status as keyof typeof colors]}` }} />
17	<span "color:#79c0ff">className="flex-1 text-sm font-medium text-white/70">{s.name}</span>
18	<span "color:#79c0ff">className="text-[10px] font-bold capitalize" "color:#79c0ff">style={{ color: colors[s.status as keyof typeof colors] }}>{s.status}</span>
19	<span "color:#79c0ff">className="text-[10px] text-white/25">{s.uptime}</span>
20	</div>
21	))}
22	</div>
23	);
24	}

⬡ UIDrop Component24 lines

TypeScript ReactUTF-8

Glass Alert Variants

✓

Deployment successful

v2.4.1 is now live on production

Build failed

TypeScript error in auth/login.tsx:42

⚠

Storage at 89%

Upgrade your plan to avoid downtime

ℹ

Maintenance window

Scheduled downtime Sun 2–4 AM UTC

Success, error, warning and info glass alerts — dismissible with icons and messages

glass-alert-variants.tsx

1	export function GlassAlerts() {
2	const alerts = [
3	{ type: "success", icon: "✓", title: "Deployed successfully", msg: "v2.4.1 is live on production" },
4	{ type: "error", icon: "✕", title: "Build failed", msg: "TypeScript error in auth/login.tsx:42" },
5	{ type: "warning", icon: "⚠", title: "Storage at 89%", msg: "Upgrade to avoid service disruption" },
6	{ type: "info", icon: "ℹ", title: "Maintenance window", msg: "Scheduled downtime Sunday 2–4 AM UTC" },
7	];
8	const styles = {
9	success: { border: "rgba(34,197,94,0.3)", bg: "rgba(34,197,94,0.08)", dot: "#22c55e" },
10	error: { border: "rgba(239,68,68,0.3)", bg: "rgba(239,68,68,0.08)", dot: "#ef4444" },
11	warning: { border: "rgba(245,158,11,0.3)", bg: "rgba(245,158,11,0.08)", dot: "#f59e0b" },
12	info: { border: "rgba(99,102,241,0.3)", bg: "rgba(99,102,241,0.08)", dot: "#818cf8" },
13	};
14	return (
15	<div "color:#79c0ff">className="flex flex-col gap-3">
16	{alerts.map(alert => {
17	const s = styles[alert.type as keyof typeof styles];
18	return (
19	<div "color:#79c0ff">key={alert.type} "color:#79c0ff">className="flex items-start gap-3 rounded-2xl px-4 py-3.5"
20	"color:#79c0ff">style={{ background: s.bg, backdropFilter: "blur(16px)", border: `1px solid ${s.border}` }}>
21	<div "color:#79c0ff">className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-black text-white"
22	"color:#79c0ff">style={{ background: `${s.dot}25`, border: `1px solid ${s.dot}50` }}>
23	{alert.icon}
24	</div>
25	<div "color:#79c0ff">className="flex-1">
26	<p "color:#79c0ff">className="text-sm font-black text-white">{alert.title}</p>
27	<p "color:#79c0ff">className="text-xs text-white/45 mt-0.5">{alert.msg}</p>
28	</div>
29	<button "color:#79c0ff">className="text-white/25 hover:text-white/60 transition-colors">✕</button>
30	</div>
31	);
32	})}
33	</div>
34	);
35	}

⬡ UIDrop Component35 lines

TypeScript ReactUTF-8

Glass Toast Notifications

Changes saved successfully

3 new comments on your post

Session expires in 5 min

Stacked glass toast system — bottom-right floating notifications with variants

glass-toast-notifications.tsx

1	export function GlassToasts() {
2	const toasts = [
3	{ icon: "✓", msg: "Changes saved successfully", color: "#22c55e" },
4	{ icon: "ℹ", msg: "3 new comments on your post", color: "#6366f1" },
5	{ icon: "⚠", msg: "Session expires in 5 minutes", color: "#f59e0b" },
6	];
7	return (
8	<div "color:#79c0ff">className="fixed bottom-6 right-6 flex flex-col gap-2 z-50">
9	{toasts.map((toast, i) => (
10	<div "color:#79c0ff">key={i} "color:#79c0ff">className="flex items-center gap-3 rounded-2xl px-4 py-3 min-w-[260px]"
11	"color:#79c0ff">style={{ background: "rgba(15,15,30,0.9)", backdropFilter: "blur(20px)", border: "1px solid rgba(255,255,255,0.12)", boxShadow: "0 8px 32px rgba(0,0,0,0.4)" }}>
12	<div "color:#79c0ff">className="h-2 w-2 rounded-full shrink-0" "color:#79c0ff">style={{ background: toast.color }} />
13	<span "color:#79c0ff">className="text-sm text-white/80 flex-1">{toast.msg}</span>
14	<button "color:#79c0ff">className="text-white/30 hover:text-white/60 transition-colors text-xs">✕</button>
15	</div>
16	))}
17	</div>
18	);
19	}

⬡ UIDrop Component19 lines

TypeScript ReactUTF-8

Glass Analytics Dashboard

Total Revenue

$48,295

↑ 12.4%vs last month

Last 12 months

AprMayJunJulAugSepOctNovDecJanFebMar

12.4K

Active Users

↑8%

4.2%

Conversion

↑0.3%

$3.9

Avg Revenue

↑$0.4

Revenue dashboard widget with bar chart, KPI metrics, and trend indicators

glass-analytics-dashboard.tsx

1	export function GlassAnalytics() {
2	const bars = [28,42,35,58,48,72,65,88,74,82,95,100];
3	const months = ["Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar"];
4	return (
5	<div "color:#79c0ff">className="w-full rounded-3xl p-7"
6	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.07)", backdropFilter: "blur(24px)", border: "1px solid rgba(255,255,255,0.12)" }}>
7	<div "color:#79c0ff">className="flex items-start justify-between mb-6">
8	<div>
9	<p "color:#79c0ff">className="text-xs text-white/35 uppercase tracking-widest mb-1">Total Revenue</p>
10	<p "color:#79c0ff">className="text-5xl font-black text-white leading-none">$48,295</p>
11	<div "color:#79c0ff">className="flex items-center gap-2 mt-2">
12	<span "color:#79c0ff">className="text-sm font-black text-emerald-400">↑ 12.4%</span>
13	<span "color:#79c0ff">className="text-xs text-white/30">vs last month</span>
14	</div>
15	</div>
16	<select "color:#79c0ff">className="rounded-xl px-3 py-2 text-sm text-white/50 outline-none"
17	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.1)" }}>
18	<option>Last 12 months</option>
19	</select>
20	</div>
21	{/* Chart */}
22	<div "color:#79c0ff">className="flex items-end gap-2 h-28 mb-2">
23	{bars.map((h, i) => (
24	<div "color:#79c0ff">key={i} "color:#79c0ff">className="flex-1 rounded-t-lg transition-all"
25	"color:#79c0ff">style={{ height: `${h}%`, background: i === bars.length - 1
26	? "linear-gradient(to top, rgba(20,184,166,0.9), rgba(99,102,241,0.8))"
27	: "rgba(255,255,255,0.1)" }} />
28	))}
29	</div>
30	<div "color:#79c0ff">className="flex justify-between mb-6">
31	{months.map(m => <span "color:#79c0ff">key={m} "color:#79c0ff">className="text-[9px] text-white/25">{m}</span>)}
32	</div>
33	{/* Stats */}
34	<div "color:#79c0ff">className="grid grid-cols-3 gap-4">
35	{[["12.4K","Active Users","↑8%","#6366f1"],["4.2%","Conversion","↑0.3%","#14b8a6"],["$3.9","Avg Revenue","↑$0.4","#f59e0b"]].map(([v,l,t,c]) => (
36	<div "color:#79c0ff">key={l} "color:#79c0ff">className="rounded-2xl p-4"
37	"color:#79c0ff">style={{ background: `${c}15`, border: `1px solid ${c}30` }}>
38	<p "color:#79c0ff">className="text-xl font-black text-white">{v}</p>
39	<p "color:#79c0ff">className="text-xs text-white/40 mt-0.5">{l}</p>
40	<p "color:#79c0ff">className="text-xs font-black mt-1.5" "color:#79c0ff">style={{ color: c }}>{t}</p>
41	</div>
42	))}
43	</div>
44	</div>
45	);
46	}

⬡ UIDrop Component46 lines

TypeScript ReactUTF-8

Glass Stats Row

Revenue

$48.2K

+12%

Users

12.4K

+8%

Conv.

4.2%

+0.3%

Churn

1.8%

-0.2%

4 glass stat cards with trend arrows — paste into any dashboard or landing page

glass-stats-row.tsx

1	export function GlassStats() {
2	const stats = [
3	{ label: "Revenue", value: "$48.2K", trend: "+12%", up: true, color: "#6366f1" },
4	{ label: "Active Users", value: "12.4K", trend: "+8%", up: true, color: "#14b8a6" },
5	{ label: "Conversion", value: "4.2%", trend: "+0.3%", up: true, color: "#f59e0b" },
6	{ label: "Churn Rate", value: "1.8%", trend: "-0.2%", up: false, color: "#ef4444" },
7	];
8	return (
9	<div "color:#79c0ff">className="grid grid-cols-2 gap-4">
10	{stats.map(s => (
11	<div "color:#79c0ff">key={s.label} "color:#79c0ff">className="rounded-2xl p-5"
12	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.07)", backdropFilter: "blur(20px)", border: "1px solid rgba(255,255,255,0.1)" }}>
13	<p "color:#79c0ff">className="text-xs text-white/35 mb-2">{s.label}</p>
14	<p "color:#79c0ff">className="text-2xl font-black text-white">{s.value}</p>
15	<span "color:#79c0ff">className="text-xs font-black" "color:#79c0ff">style={{ color: s.up ? "#22c55e" : "#ef4444" }}>
16	{s.trend}
17	</span>
18	</div>
19	))}
20	</div>
21	);
22	}

⬡ UIDrop Component22 lines

TypeScript ReactUTF-8

Glass Modal Dialog

Click to see glass modal

Confirmation dialog with frosted glass overlay — toggle to see backdrop blur effect

glass-modal-dialog.tsx

1	"use client";
2	import { useState } from "react";
3
4	export function GlassModal() {
5	const [open, setOpen] = useState(false);
6	return (
7	<>
8	<button "color:#79c0ff">onClick={() => setOpen(true)}
9	"color:#79c0ff">className="rounded-2xl px-6 py-3 text-sm font-black text-white transition-all hover:scale-105"
10	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.12)", backdropFilter: "blur(10px)", border: "1px solid rgba(255,255,255,0.2)" }}>
11	Open Modal →
12	</button>
13	{open && (
14	<div "color:#79c0ff">className="fixed inset-0 z-50 flex items-center justify-center p-4"
15	"color:#79c0ff">style={{ background: "rgba(0,0,0,0.5)", backdropFilter: "blur(12px)" }}
16	"color:#79c0ff">onClick={() => setOpen(false)}>
17	<div "color:#79c0ff">className="w-full max-w-sm rounded-3xl p-7 text-center"
18	"color:#79c0ff">style={{ background: "rgba(15,15,30,0.95)", backdropFilter: "blur(24px)", border: "1px solid rgba(255,255,255,0.15)" }}
19	"color:#79c0ff">onClick={e => e.stopPropagation()}>
20	<div "color:#79c0ff">className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl"
21	"color:#79c0ff">style={{ background: "rgba(239,68,68,0.12)", border: "1px solid rgba(239,68,68,0.2)" }}>
22	<span "color:#79c0ff">className="text-2xl">🗑️</span>
23	</div>
24	<h3 "color:#79c0ff">className="text-xl font-black text-white mb-2">Delete project?</h3>
25	<p "color:#79c0ff">className="text-sm text-white/45 mb-7 leading-relaxed">
26	This will permanently delete all data. This action cannot be undone.
27	</p>
28	<div "color:#79c0ff">className="flex gap-3">
29	<button "color:#79c0ff">onClick={() => setOpen(false)}
30	"color:#79c0ff">className="flex-1 rounded-xl py-3 text-sm font-bold text-white/60 hover:text-white transition-all"
31	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.1)" }}>
32	Cancel
33	</button>
34	<button "color:#79c0ff">onClick={() => setOpen(false)}
35	"color:#79c0ff">className="flex-1 rounded-xl py-3 text-sm font-black text-white transition-all hover:opacity-90"
36	"color:#79c0ff">style={{ background: "rgba(239,68,68,0.6)", backdropFilter: "blur(10px)", border: "1px solid rgba(239,68,68,0.35)" }}>
37	Delete
38	</button>
39	</div>
40	</div>
41	</div>
42	)}
43	</>
44	);
45	}

⬡ UIDrop Component45 lines

TypeScript ReactUTF-8

Glass Settings Panel

Settings

Manage your preferences

Email notifications

Receive updates via email

Push notifications

Browser & mobile alerts

Two-factor auth

Extra account security

Activity digest

Weekly summary emails

Toggle-based settings card for notifications, privacy and security preferences

glass-settings-panel.tsx

1	"use client";
2	import { useState } from "react";
3
4	export function GlassSettings() {
5	const [toggles, setToggles] = useState({ email: true, push: false, twofa: true, digest: true });
6	const settings = [
7	{ key: "email", label: "Email notifications", desc: "Updates via email" },
8	{ key: "push", label: "Push notifications", desc: "Browser & mobile" },
9	{ key: "twofa", label: "Two-factor auth", desc: "Extra security" },
10	{ key: "digest", label: "Weekly digest", desc: "Summary emails" },
11	];
12	return (
13	<div "color:#79c0ff">className="w-full max-w-sm rounded-3xl overflow-hidden"
14	"color:#79c0ff">style={{ background: "rgba(255,255,255,0.07)", backdropFilter: "blur(24px)", border: "1px solid rgba(255,255,255,0.12)" }}>
15	{settings.map(s => (
16	<div "color:#79c0ff">key={s.key} "color:#79c0ff">className="flex items-center justify-between px-5 py-4"
17	"color:#79c0ff">style={{ borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
18	<div>
19	<p "color:#79c0ff">className="text-sm font-bold text-white">{s.label}</p>
20	<p "color:#79c0ff">className="text-xs text-white/35 mt-0.5">{s.desc}</p>
21	</div>
22	<button "color:#79c0ff">onClick={() => setToggles(t => ({ ...t, [s.key]: !t[s.key as keyof typeof t] }))}
23	"color:#79c0ff">className="relative h-6 w-11 rounded-full transition-all duration-200"
24	"color:#79c0ff">style={{ background: toggles[s.key as keyof typeof toggles] ? "rgba(20,184,166,0.7)" : "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.15)" }}>
25	<div "color:#79c0ff">className="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-all duration-200"
26	"color:#79c0ff">style={{ left: toggles[s.key as keyof typeof toggles] ? "calc(100% - 22px)" : "2px" }} />
27	</button>
28	</div>
29	))}
30	</div>
31	);
32	}

⬡ UIDrop Component32 lines

TypeScript ReactUTF-8

Glassmorphism

Build products10× faster.

Sarah Johnson

Welcome back

Stay in the loop

Build UI10× faster

Notifications

System Status

Settings

Glassmorphism

Build products10× faster.

Sarah Johnson

Welcome back

Stay in the loop

Build UI10× faster

Notifications

System Status

Settings

Build products
10× faster.

Build UI
10× faster

Build products
10× faster.

Build UI
10× faster