Premium Cards

Pricing, stats, profile, testimonial, product, and interactive hover cards.

components

Avatar Profile Card

Sarah Chen

Senior Product Designer

FigmaReactUX

128

Posts

4.2k

Followers

310

Following

Compact profile with gradient avatar, role badge, and social stats

avatar-profile-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 p-5 flex flex-col items-center text-center">
2	<div "color:#79c0ff">className="relative mb-3">
3	<div "color:#79c0ff">className="w-16 h-16 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-2xl font-bold text-white">SC</div>
4	<span "color:#79c0ff">className="absolute -bottom-1 -right-1 w-5 h-5 bg-emerald-400 border-2 border-slate-800 rounded-full" />
5	</div>
6	<h3 "color:#79c0ff">className="text-white font-semibold">Sarah Chen</h3>
7	<p "color:#79c0ff">className="text-slate-400 text-xs mt-0.5">Senior Product Designer</p>
8	<div "color:#79c0ff">className="flex gap-1 mt-2 flex-wrap justify-center">
9	{["Figma", "React", "UX"].map(t => (
10	<span "color:#79c0ff">key={t} "color:#79c0ff">className="bg-violet-500/15 text-violet-300 text-[10px] px-2 py-0.5 rounded-full border border-violet-500/20">{t}</span>
11	))}
12	</div>
13	<div "color:#79c0ff">className="flex gap-6 mt-4 w-full justify-center border-t border-slate-700 pt-4">
14	{[["128","Posts"],["4.2k","Followers"],["310","Following"]].map(([val,lab]) => (
15	<div "color:#79c0ff">key={lab} "color:#79c0ff">className="text-center">
16	<p "color:#79c0ff">className="text-white font-bold text-sm">{val}</p>
17	<p "color:#79c0ff">className="text-slate-500 text-[10px]">{lab}</p>
18	</div>
19	))}
20	</div>
21	</div>

⬡ UIDrop Component21 lines

TypeScript ReactUTF-8

Team Member Card

James Wilson

Engineering

Lead Frontend Engineer

Horizontal card with role, department tag, and contact actions

team-member-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 p-4 flex items-center gap-4">
2	<div "color:#79c0ff">className="w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center text-xl font-bold text-white shrink-0">JW</div>
3	<div "color:#79c0ff">className="flex-1 min-w-0">
4	<div "color:#79c0ff">className="flex items-center gap-2">
5	<h3 "color:#79c0ff">className="text-white font-semibold text-sm">James Wilson</h3>
6	<span "color:#79c0ff">className="bg-blue-500/20 text-blue-300 text-[10px] px-1.5 py-0.5 rounded-md">Engineering</span>
7	</div>
8	<p "color:#79c0ff">className="text-slate-400 text-xs mt-0.5">Lead Frontend Engineer</p>
9	</div>
10	<button "color:#79c0ff">className="bg-slate-700 hover:bg-violet-600 text-slate-300 hover:text-white text-xs px-3 py-1.5 rounded-lg transition">Connect</button>
11	</div>

⬡ UIDrop Component11 lines

TypeScript ReactUTF-8

Social Profile Card

Maya Patel

@mayabuilds · 🌏 San Francisco

Building beautiful UIs · Open source contributor · Design systems nerd

12.5k followers492 following

Full-bleed cover with floating avatar and platform links

social-profile-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 overflow-hidden">
2	<div "color:#79c0ff">className="h-24 bg-gradient-to-r from-pink-600 via-rose-500 to-orange-500 relative">
3	<div "color:#79c0ff">className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2">
4	<div "color:#79c0ff">className="w-14 h-14 rounded-full bg-gradient-to-br from-pink-400 to-rose-600 flex items-center justify-center text-xl font-bold text-white border-4 border-slate-900">MP</div>
5	</div>
6	</div>
7	<div "color:#79c0ff">className="bg-slate-800 px-5 pt-10 pb-5 text-center">
8	<h3 "color:#79c0ff">className="text-white font-semibold">Maya Patel</h3>
9	<p "color:#79c0ff">className="text-slate-400 text-xs mt-0.5">@mayabuilds · San Francisco</p>
10	<p "color:#79c0ff">className="text-slate-300 text-xs mt-2 leading-relaxed">Building beautiful UIs · Open source contributor</p>
11	<button "color:#79c0ff">className="mt-4 w-full bg-gradient-to-r from-pink-600 to-rose-500 text-white text-xs font-semibold py-2 rounded-xl transition">Follow</button>
12	</div>
13	</div>

⬡ UIDrop Component13 lines

TypeScript ReactUTF-8

Basic Tier Card

Starter

$9/month

Perfect for individuals and small projects.

5 projects

10GB storage

Email support

Basic analytics

Clean starter plan with feature list and CTA

basic-tier-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 p-5">
2	<p "color:#79c0ff">className="text-slate-400 text-xs font-semibold uppercase tracking-widest">Starter</p>
3	<div "color:#79c0ff">className="flex items-end gap-1 mt-2">
4	<span "color:#79c0ff">className="text-white font-bold text-4xl">$9</span>
5	<span "color:#79c0ff">className="text-slate-400 text-sm mb-1">/month</span>
6	</div>
7	{["5 projects","10GB storage","Email support","Basic analytics"].map(f => (
8	<div "color:#79c0ff">key={f} "color:#79c0ff">className="flex items-center gap-2.5 py-1.5">
9	<svg "color:#79c0ff">className="w-4 h-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
10	<span "color:#79c0ff">className="text-slate-300 text-sm">{f}</span>
11	</div>
12	))}
13	<button "color:#79c0ff">className="mt-4 w-full border border-slate-600 hover:border-violet-500 text-slate-300 text-sm font-medium py-2.5 rounded-xl transition">Get Started</button>
14	</div>

⬡ UIDrop Component14 lines

TypeScript ReactUTF-8

Pro Tier Card

Pro

POPULAR

$29/month

Everything you need to scale your business.

Unlimited projects

100GB storage

Priority support

Advanced analytics

Custom domains

API access

Highlighted popular plan with gradient border and badge

pro-tier-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-700 p-px shadow-2xl shadow-violet-900/50">
2	<div "color:#79c0ff">className="rounded-[15px] bg-slate-900 p-5">
3	<div "color:#79c0ff">className="flex items-center justify-between">
4	<p "color:#79c0ff">className="text-violet-300 text-xs font-semibold uppercase tracking-widest">Pro</p>
5	<span "color:#79c0ff">className="bg-violet-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">POPULAR</span>
6	</div>
7	<div "color:#79c0ff">className="flex items-end gap-1 mt-2">
8	<span "color:#79c0ff">className="text-white font-bold text-4xl">$29</span>
9	<span "color:#79c0ff">className="text-slate-400 text-sm mb-1">/month</span>
10	</div>
11	{["Unlimited projects","100GB storage","Priority support","Advanced analytics"].map(f => (
12	<div "color:#79c0ff">key={f} "color:#79c0ff">className="flex items-center gap-2.5 py-1">
13	<svg "color:#79c0ff">className="w-4 h-4 text-violet-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
14	<span "color:#79c0ff">className="text-slate-300 text-sm">{f}</span>
15	</div>
16	))}
17	<button "color:#79c0ff">className="mt-4 w-full bg-gradient-to-r from-violet-600 to-indigo-600 text-white text-sm font-semibold py-2.5 rounded-xl transition">Start Free Trial</button>
18	</div>
19	</div>

⬡ UIDrop Component19 lines

TypeScript ReactUTF-8

Product Card with Like

🎧

NEW

Sony Audio

WH-1000XM5 Headphones

(2.4k)

$349$429

E-commerce card with animated heart toggle and rating

product-card-with-like.tsx

1	function ProductCard() {
2	const [liked, setLiked] = useState(false);
3	return (
4	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 overflow-hidden">
5	<div "color:#79c0ff">className="relative h-44 bg-gradient-to-br from-indigo-900 via-purple-900 to-slate-900 flex items-center justify-center">
6	<div "color:#79c0ff">className="w-24 h-24 rounded-2xl bg-gradient-to-br from-violet-400 to-indigo-600 shadow-2xl flex items-center justify-center text-4xl">🎧</div>
7	<button "color:#79c0ff">onClick={() => setLiked(l => !l)}
8	"color:#79c0ff">className={`absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center transition-all ${liked ? "bg-rose-500 text-white" : "bg-slate-700/80 text-slate-400"}`}>
9	<svg "color:#79c0ff">className="w-4 h-4" fill={liked ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
10	<path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 20.364l-7.682-7.682a4.5 4.5 0 010-6.364z"/>
11	</svg>
12	</button>
13	</div>
14	<div "color:#79c0ff">className="p-4">
15	<h3 "color:#79c0ff">className="text-white font-semibold">WH-1000XM5 Headphones</h3>
16	<div "color:#79c0ff">className="flex items-center justify-between mt-3">
17	<span "color:#79c0ff">className="text-white font-bold text-lg">$349</span>
18	<button "color:#79c0ff">className="bg-violet-600 hover:bg-violet-500 text-white text-xs font-semibold px-3 py-1.5 rounded-lg transition">Add to Cart</button>
19	</div>
20	</div>
21	</div>
22	);
23	}

⬡ UIDrop Component23 lines

TypeScript ReactUTF-8

Product with Rating

⌚

-23%

Apple

Apple Watch Series 10

5.0 (8.1k reviews)

$399$519

In Stock

Card with star rating, review count, and discount badge

product-with-rating.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 overflow-hidden">
2	<div "color:#79c0ff">className="h-40 bg-gradient-to-br from-emerald-900 to-teal-900 flex items-center justify-center relative">
3	<div "color:#79c0ff">className="w-20 h-20 rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-600 shadow-2xl flex items-center justify-center text-3xl">⌚</div>
4	<div "color:#79c0ff">className="absolute top-3 left-3 bg-rose-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">-23%</div>
5	</div>
6	<div "color:#79c0ff">className="p-4">
7	<h3 "color:#79c0ff">className="text-white font-semibold mt-0.5">Apple Watch Series 10</h3>
8	<div "color:#79c0ff">className="flex items-center gap-1.5 mt-2">
9	{"★★★★★".split("").map((s,i) => <span "color:#79c0ff">key={i} "color:#79c0ff">className="text-amber-400 text-sm">{s}</span>)}
10	<span "color:#79c0ff">className="text-slate-400 text-xs">5.0 (8.1k)</span>
11	</div>
12	<div "color:#79c0ff">className="flex items-center justify-between mt-3">
13	<div "color:#79c0ff">className="flex items-center gap-2">
14	<span "color:#79c0ff">className="text-white font-bold">$399</span>
15	<span "color:#79c0ff">className="text-slate-500 text-sm line-through">$519</span>
16	</div>
17	<span "color:#79c0ff">className="text-emerald-400 text-xs font-medium">In Stock</span>
18	</div>
19	</div>
20	</div>

⬡ UIDrop Component20 lines

TypeScript ReactUTF-8

Quick-Add Card

👟

Nike

Air Max 270 React

$189

Color:

Minimal product card with color swatch selector

quick-add-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 overflow-hidden">
2	<div "color:#79c0ff">className="h-40 bg-gradient-to-br from-rose-900 to-pink-900 flex items-center justify-center">
3	<div "color:#79c0ff">className="w-20 h-20 rounded-full bg-gradient-to-br from-rose-400 to-pink-600 text-3xl flex items-center justify-center">👟</div>
4	</div>
5	<div "color:#79c0ff">className="p-4">
6	<div "color:#79c0ff">className="flex items-start justify-between">
7	<h3 "color:#79c0ff">className="text-white font-semibold text-sm">Air Max 270 React</h3>
8	<span "color:#79c0ff">className="text-white font-bold">$189</span>
9	</div>
10	<div "color:#79c0ff">className="flex items-center gap-2 mt-3">
11	{["bg-rose-500","bg-slate-700","bg-blue-500","bg-amber-500"].map((c,i) => (
12	<button "color:#79c0ff">key={i} "color:#79c0ff">className={`w-5 h-5 rounded-full ${c}`}/>
13	))}
14	</div>
15	<button "color:#79c0ff">className="mt-3 w-full bg-rose-600 text-white text-xs font-semibold py-2 rounded-xl">Quick Add</button>
16	</div>
17	</div>

⬡ UIDrop Component17 lines

TypeScript ReactUTF-8

Metric Card

Monthly Revenue

$84,240

+12.4%vs last month

KPI tile with trend arrow, sparkline-style bar, and delta

metric-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 p-5">
2	<div "color:#79c0ff">className="flex items-start justify-between">
3	<div>
4	<p "color:#79c0ff">className="text-slate-400 text-xs font-medium">Monthly Revenue</p>
5	<p "color:#79c0ff">className="text-white text-3xl font-bold mt-1">$84,240</p>
6	</div>
7	<div "color:#79c0ff">className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center">
8	{/* icon */}
9	</div>
10	</div>
11	<div "color:#79c0ff">className="flex items-center gap-1.5 mt-3">
12	<span "color:#79c0ff">className="text-emerald-400 text-xs font-semibold">+12.4%</span>
13	<span "color:#79c0ff">className="text-slate-500 text-xs">vs last month</span>
14	</div>
15	<div "color:#79c0ff">className="flex items-end gap-1 mt-4 h-10">
16	{[40,55,35,70,60,80,65,90,75,100,85,95].map((h,i) => (
17	<div "color:#79c0ff">key={i} "color:#79c0ff">className="flex-1 rounded-sm bg-slate-700" "color:#79c0ff">style={{ height: `${h}%` }}/>
18	))}
19	</div>
20	</div>

⬡ UIDrop Component20 lines

TypeScript ReactUTF-8

KPI Dashboard Card

Performance

Q1 2026

Conversion Rate3.8%

Bounce Rate24.1%

Avg. Session4m 32s

Goal Completion89%

Multi-metric dashboard tile with progress bars

kpi-dashboard-card.tsx

1	const metrics = [
2	{ label: "Conversion Rate", value: "3.8%", pct: 76, color: "bg-violet-500" },
3	{ label: "Bounce Rate", value: "24.1%", pct: 24, color: "bg-rose-500" },
4	{ label: "Avg. Session", value: "4m 32s", pct: 60, color: "bg-cyan-500" },
5	{ label: "Goal Completion", value: "89%", pct: 89, color: "bg-emerald-500" },
6	];
7
8	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 p-5 space-y-4">
9	<h3 "color:#79c0ff">className="text-white font-semibold text-sm">Performance</h3>
10	{metrics.map(m => (
11	<div "color:#79c0ff">key={m.label}>
12	<div "color:#79c0ff">className="flex justify-between mb-1.5">
13	<span "color:#79c0ff">className="text-slate-400 text-xs">{m.label}</span>
14	<span "color:#79c0ff">className="text-white text-xs font-semibold">{m.value}</span>
15	</div>
16	<div "color:#79c0ff">className="h-1.5 bg-slate-700 rounded-full overflow-hidden">
17	<div "color:#79c0ff">className={`h-full ${m.color} rounded-full`} "color:#79c0ff">style={{ width: `${m.pct}%` }}/>
18	</div>
19	</div>
20	))}
21	</div>

⬡ UIDrop Component21 lines

TypeScript ReactUTF-8

Icon Feature Card

⚡

Fast

Sub-100ms response on edge

🔒

Secure

SOC2 Type II certified

🌐

Global CDN

300+ PoPs worldwide

♾️

Scalable

Auto-scales to demand

Feature highlight with gradient icon background and hover lift

icon-feature-card.tsx

1	const features = [
2	{ icon: "⚡", title: "Fast", desc: "Sub-100ms response on edge", color: "from-amber-500 to-orange-600" },
3	{ icon: "🔒", title: "Secure", desc: "SOC2 Type II certified", color: "from-emerald-500 to-teal-600" },
4	{ icon: "🌐", title: "Global CDN",desc: "300+ PoPs worldwide", color: "from-blue-500 to-cyan-600" },
5	{ icon: "♾️", title: "Scalable", desc: "Auto-scales to demand", color: "from-violet-500 to-purple-600" },
6	];
7
8	<div "color:#79c0ff">className="grid grid-cols-2 gap-3">
9	{features.map(f => (
10	<div "color:#79c0ff">key={f.title} "color:#79c0ff">className="rounded-xl border border-slate-700 bg-slate-800/80 p-3.5 hover:-translate-y-0.5 transition-transform">
11	<div "color:#79c0ff">className={`w-9 h-9 rounded-xl bg-gradient-to-br ${f.color} flex items-center justify-center text-lg mb-2.5`}>{f.icon}</div>
12	<p "color:#79c0ff">className="text-white font-semibold text-sm">{f.title}</p>
13	<p "color:#79c0ff">className="text-slate-400 text-[11px] mt-0.5">{f.desc}</p>
14	</div>
15	))}
16	</div>

⬡ UIDrop Component16 lines

TypeScript ReactUTF-8

Feature Comparison Card

Feature

Free

Pro

Analytics

Custom Domain

Team Access

API Access

Side-by-side plan comparison with check/cross indicators

feature-comparison-card.tsx

1	const rows = [
2	["Analytics", true, true],
3	["Custom Domain", false, true],
4	["Team Access", false, true],
5	["API Access", false, true],
6	];
7
8	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 overflow-hidden">
9	<div "color:#79c0ff">className="grid grid-cols-3 border-b border-slate-700 text-center">
10	<div "color:#79c0ff">className="py-3 border-r border-slate-700"><p "color:#79c0ff">className="text-slate-400 text-xs">Feature</p></div>
11	<div "color:#79c0ff">className="py-3 border-r border-slate-700"><p "color:#79c0ff">className="text-slate-300 text-xs font-semibold">Free</p></div>
12	<div "color:#79c0ff">className="py-3 bg-violet-500/10"><p "color:#79c0ff">className="text-violet-300 text-xs font-semibold">Pro</p></div>
13	</div>
14	{rows.map(([feat, free, pro]) => (
15	<div "color:#79c0ff">key={feat} "color:#79c0ff">className="grid grid-cols-3 border-b border-slate-700/50 text-center last:border-0">
16	<div "color:#79c0ff">className="py-2.5 px-3 border-r border-slate-700/50 text-left"><span "color:#79c0ff">className="text-slate-400 text-xs">{feat}</span></div>
17	<div "color:#79c0ff">className="py-2.5 border-r border-slate-700/50 flex items-center justify-center">
18	{free ? <Check "color:#79c0ff">className="text-emerald-400"/> : <X "color:#79c0ff">className="text-slate-600"/>}
19	</div>
20	<div "color:#79c0ff">className="py-2.5 bg-violet-500/5 flex items-center justify-center">
21	{pro ? <Check "color:#79c0ff">className="text-violet-400"/> : <X "color:#79c0ff">className="text-slate-600"/>}
22	</div>
23	</div>
24	))}
25	</div>

⬡ UIDrop Component25 lines

TypeScript ReactUTF-8

Why-Us Card

Why 40,000+ teams choose us

Trusted by companies from seed-stage startups to Fortune 500 enterprises. Here's why.

Faster deployment

Compared to industry avg

99.99%

Uptime SLA

Backed by contractual guarantee

$2.4M

Avg. cost saved / year

For enterprise customers

Full-width value proposition card with gradient accent bar

why-us-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 p-5 relative overflow-hidden">
2	<div "color:#79c0ff">className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-violet-600 via-cyan-500 to-emerald-500"/>
3	<h3 "color:#79c0ff">className="text-white font-bold">Why 40,000+ teams choose us</h3>
4	{[
5	{ num: "3x", label: "Faster deployment", sub: "Compared to industry avg" },
6	{ num: "99.99%",label: "Uptime SLA", sub: "Backed by contractual guarantee" },
7	{ num: "$2.4M", label: "Avg. cost saved / year", sub: "For enterprise customers" },
8	].map(s => (
9	<div "color:#79c0ff">key={s.num} "color:#79c0ff">className="flex items-center gap-4 mt-3">
10	<span "color:#79c0ff">className="text-violet-400 font-bold text-xl w-16 shrink-0">{s.num}</span>
11	<div>
12	<p "color:#79c0ff">className="text-white text-sm font-medium">{s.label}</p>
13	<p "color:#79c0ff">className="text-slate-500 text-[11px]">{s.sub}</p>
14	</div>
15	</div>
16	))}
17	</div>

⬡ UIDrop Component17 lines

TypeScript ReactUTF-8

Article Preview Card

🤖AI & ML

GPT-5 and the Future of Autonomous Agents

A deep dive into how the latest generation of language models is enabling a new class of AI-powered software agents.

Arjun K.

8 min read

Blog post card with category badge, read time, and author

article-preview-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 overflow-hidden">
2	<div "color:#79c0ff">className="h-36 bg-gradient-to-br from-indigo-900 via-violet-900 to-purple-900 flex items-center justify-center relative">
3	<span "color:#79c0ff">className="text-5xl">🤖</span>
4	<span "color:#79c0ff">className="absolute top-3 left-3 bg-violet-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">AI & ML</span>
5	</div>
6	<div "color:#79c0ff">className="p-4">
7	<h3 "color:#79c0ff">className="text-white font-semibold leading-snug">GPT-5 and the Future of Autonomous Agents</h3>
8	<p "color:#79c0ff">className="text-slate-400 text-xs mt-1.5 leading-relaxed line-clamp-2">A deep dive into how language models are enabling AI-powered agents.</p>
9	<div "color:#79c0ff">className="flex items-center justify-between mt-3">
10	<div "color:#79c0ff">className="flex items-center gap-2">
11	<div "color:#79c0ff">className="w-6 h-6 rounded-full bg-gradient-to-br from-violet-400 to-indigo-600 flex items-center justify-center text-[10px] font-bold text-white">AK</div>
12	<span "color:#79c0ff">className="text-slate-400 text-xs">Arjun K.</span>
13	</div>
14	<span "color:#79c0ff">className="text-slate-500 text-xs">8 min read</span>
15	</div>
16	</div>
17	</div>

⬡ UIDrop Component17 lines

TypeScript ReactUTF-8

Saveable Article Card

🌊

Technology

The Future of Web Development in 2026

Explore how AI-driven code generation and edge computing are reshaping how we build modern web applications.

James K.·5 min read

Blog card with bookmark toggle and reading progress

saveable-article-card.tsx

1	function ArticleCard() {
2	const [saved, setSaved] = useState(false);
3	return (
4	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 overflow-hidden">
5	<div "color:#79c0ff">className="h-36 bg-gradient-to-br from-cyan-900 via-teal-900 to-slate-900 flex items-center justify-center relative">
6	<div "color:#79c0ff">className="text-5xl">🌊</div>
7	<button "color:#79c0ff">onClick={() => setSaved(s => !s)}
8	"color:#79c0ff">className={`absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center transition-all ${saved ? "bg-amber-500 text-white" : "bg-slate-700/80 text-slate-400"}`}>
9	<svg "color:#79c0ff">className="w-4 h-4" fill={saved ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
10	<path strokeLinecap="round" strokeLinejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
11	</svg>
12	</button>
13	</div>
14	<div "color:#79c0ff">className="p-4">
15	<h3 "color:#79c0ff">className="text-white font-semibold">The Future of Web Development in 2026</h3>
16	<p "color:#79c0ff">className="text-slate-400 text-xs mt-1.5 leading-relaxed line-clamp-2">AI-driven code generation reshaping modern web development.</p>
17	</div>
18	</div>
19	);
20	}

⬡ UIDrop Component20 lines

TypeScript ReactUTF-8

Video Thumbnail Card

🎬

12:47LIVE

Building a Full-Stack App with Next.js 16

ReactConf · 48K views · 2 days ago

Video card with play button overlay, duration badge, and channel info

video-thumbnail-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 overflow-hidden">
2	<div "color:#79c0ff">className="relative h-40 bg-gradient-to-br from-slate-900 via-red-950 to-slate-900 flex items-center justify-center group">
3	<div "color:#79c0ff">className="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
4	<svg "color:#79c0ff">className="w-5 h-5 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
5	</div>
6	<span "color:#79c0ff">className="absolute bottom-2 right-2 bg-black/80 text-white text-[10px] font-mono px-1.5 py-0.5 rounded">12:47</span>
7	<span "color:#79c0ff">className="absolute top-2 left-2 bg-red-600 text-white text-[10px] font-bold px-1.5 py-0.5 rounded">LIVE</span>
8	</div>
9	<div "color:#79c0ff">className="p-3.5 flex gap-3">
10	<div "color:#79c0ff">className="w-8 h-8 rounded-full bg-gradient-to-br from-red-400 to-rose-600 flex items-center justify-center text-xs font-bold text-white shrink-0">YT</div>
11	<div>
12	<h3 "color:#79c0ff">className="text-white text-sm font-medium leading-snug">Building a Full-Stack App with Next.js 16</h3>
13	<p "color:#79c0ff">className="text-slate-500 text-xs mt-0.5">ReactConf · 48K views · 2 days ago</p>
14	</div>
15	</div>
16	</div>

⬡ UIDrop Component16 lines

TypeScript ReactUTF-8

Quote Card

“

“ReactUI completely transformed how our team ships product. We went from weeks to hours on complex UI work. It's genuinely the best component library I've used.”

Sarah Chen

CTO, TechStart Inc.

TechStart

Large pull-quote testimonial with gradient avatar and company logo area

quote-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 p-5 relative overflow-hidden">
2	<div "color:#79c0ff">className="absolute -top-4 -left-2 text-9xl text-slate-700 font-serif leading-none select-none">“</div>
3	<div "color:#79c0ff">className="relative">
4	<p "color:#79c0ff">className="text-slate-200 text-sm leading-relaxed mt-3">
5	"ReactUI completely transformed how our team ships product. We went from weeks to hours on complex UI work."
6	</p>
7	<div "color:#79c0ff">className="flex items-center gap-3 mt-4 pt-4 border-t border-slate-700">
8	<div "color:#79c0ff">className="w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-sm font-bold text-white">SC</div>
9	<div>
10	<p "color:#79c0ff">className="text-white text-sm font-semibold">Sarah Chen</p>
11	<p "color:#79c0ff">className="text-slate-400 text-xs">CTO, TechStart Inc.</p>
12	</div>
13	</div>
14	</div>
15	</div>

⬡ UIDrop Component15 lines

TypeScript ReactUTF-8

Star Review Card

4.9

2,841 ratings

“Absolutely love this product. The DX is incredible and my team adopted it within a day. Highly recommend to anyone building modern UIs.”

— Alex M. · Verified purchase

App store-style rating card with star breakdown bars

star-review-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 p-5">
2	<div "color:#79c0ff">className="flex items-center gap-4 mb-4">
3	<div "color:#79c0ff">className="text-center">
4	<p "color:#79c0ff">className="text-white text-4xl font-bold">4.9</p>
5	<div "color:#79c0ff">className="flex gap-0.5 mt-1 justify-center">
6	{"★★★★★".split("").map((s,i) => <span "color:#79c0ff">key={i} "color:#79c0ff">className="text-amber-400">{s}</span>)}
7	</div>
8	<p "color:#79c0ff">className="text-slate-500 text-[10px] mt-1">2,841 ratings</p>
9	</div>
10	<div "color:#79c0ff">className="flex-1 space-y-1.5">
11	{[["5",85],["4",10],["3",3],["2",1],["1",1]].map(([star,pct]) => (
12	<div "color:#79c0ff">key={star} "color:#79c0ff">className="flex items-center gap-2">
13	<span "color:#79c0ff">className="text-[10px] text-slate-500 w-3">{star}</span>
14	<div "color:#79c0ff">className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
15	<div "color:#79c0ff">className="h-full bg-amber-400 rounded-full" "color:#79c0ff">style={{ width: `${pct}%` }}/>
16	</div>
17	</div>
18	))}
19	</div>
20	</div>
21	</div>

⬡ UIDrop Component21 lines

TypeScript ReactUTF-8

Company Testimonial Card

Stripe

“We rebuilt our entire design system using this library. The level of polish, accessibility, and performance is unmatched. Our Lighthouse scores improved by 40 points.”

40pt

Lighthouse gain

60%

Dev time saved

Faster shipping

Enterprise testimonial with company branding and metrics

company-testimonial-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-gradient-to-br from-slate-800 to-slate-900 p-5">
2	<div "color:#79c0ff">className="flex items-center gap-2 mb-4">
3	<div "color:#79c0ff">className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center text-sm font-bold text-white">S</div>
4	<span "color:#79c0ff">className="text-slate-300 font-semibold text-sm">Stripe</span>
5	<div "color:#79c0ff">className="ml-auto flex gap-0.5">{"★★★★★".split("").map((s,i) => <span "color:#79c0ff">key={i} "color:#79c0ff">className="text-amber-400">{s}</span>)}</div>
6	</div>
7	<p "color:#79c0ff">className="text-slate-200 text-sm leading-relaxed">"We rebuilt our entire design system using this library."</p>
8	<div "color:#79c0ff">className="flex gap-4 mt-4 pt-4 border-t border-slate-700/50">
9	{[["40pt","Lighthouse gain"],["60%","Dev time saved"],["3x","Faster shipping"]].map(([val,lab]) => (
10	<div "color:#79c0ff">key={lab} "color:#79c0ff">className="text-center flex-1">
11	<p "color:#79c0ff">className="text-blue-400 font-bold text-sm">{val}</p>
12	<p "color:#79c0ff">className="text-slate-600 text-[10px]">{lab}</p>
13	</div>
14	))}
15	</div>
16	</div>

⬡ UIDrop Component16 lines

TypeScript ReactUTF-8

Notification Stack Card

✓

Deployment successful

main → production in 55s

Just now

High memory usage

Server-02 at 87% capacity

2m ago

New team member

Priya joined the workspace

5m ago

Stacked notification toasts with type icons and timestamps

notification-stack-card.tsx

1	const notifications = [
2	{ icon: "✓", title: "Deployment successful", body: "main → production in 55s", time: "Just now",
3	color: "border-emerald-500/30 bg-emerald-500/5", iconBg: "bg-emerald-500/20 text-emerald-400" },
4	{ icon: "!", title: "High memory usage", body: "Server-02 at 87%", time: "2m ago",
5	color: "border-amber-500/30 bg-amber-500/5", iconBg: "bg-amber-500/20 text-amber-400" },
6	{ icon: "i", title: "New team member", body: "Priya joined workspace", time: "5m ago",
7	color: "border-blue-500/30 bg-blue-500/5", iconBg: "bg-blue-500/20 text-blue-400" },
8	];
9
10	<div "color:#79c0ff">className="space-y-2">
11	{notifications.map(n => (
12	<div "color:#79c0ff">key={n.icon} "color:#79c0ff">className={`flex items-start gap-3 rounded-xl border p-3 ${n.color}`}>
13	<div "color:#79c0ff">className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0 ${n.iconBg}`}>{n.icon}</div>
14	<div "color:#79c0ff">className="flex-1 min-w-0">
15	<p "color:#79c0ff">className="text-white text-xs font-semibold">{n.title}</p>
16	<p "color:#79c0ff">className="text-slate-400 text-[11px] mt-0.5">{n.body}</p>
17	</div>
18	<span "color:#79c0ff">className="text-slate-600 text-[10px] shrink-0">{n.time}</span>
19	</div>
20	))}
21	</div>

⬡ UIDrop Component21 lines

TypeScript ReactUTF-8

Metric Dashboard Card

Performance Overview

↑ This month

Revenue

$84.2K

+12%

Users

12,480

+8%

Churn

2.1%

-0.3%

LTV

$420

+5%

Dark stats card with four KPI tiles, color-coded trend arrows, and sparkline bars.

metric-dashboard-card.tsx

1	<div "color:#79c0ff">className="rounded-2xl border border-slate-700 bg-slate-800 p-5">
2	<div "color:#79c0ff">className="mb-4 flex items-center justify-between">
3	<h3 "color:#79c0ff">className="text-sm font-bold text-white">Performance Overview</h3>
4	<span "color:#79c0ff">className="rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">↑ This month</span>
5	</div>
6	<div "color:#79c0ff">className="grid grid-cols-2 gap-3">
7	{[{label:"Revenue",val:"$84.2K",trend:"+12%",up:true,bars:[40,55,48,70,62,85,80]},{label:"Users",val:"12,480",trend:"+8%",up:true,bars:[30,45,38,55,50,65,72]},{label:"Churn",val:"2.1%",trend:"-0.3%",up:false,bars:[22,18,25,20,15,12,10]},{label:"LTV",val:"$420",trend:"+5%",up:true,bars:[38,42,40,50,55,60,65]}].map(m=>(
8	<div "color:#79c0ff">key={m.label} "color:#79c0ff">className="rounded-xl border border-slate-700/50 bg-slate-900 p-3">
9	<p "color:#79c0ff">className="text-[10px] text-slate-500">{m.label}</p>
10	<p "color:#79c0ff">className="mt-0.5 text-base font-extrabold text-white">{m.val}</p>
11	<p "color:#79c0ff">className={`text-[10px] font-semibold ${m.up?"text-emerald-400":"text-red-400"}`}>{m.trend}</p>
12	<div "color:#79c0ff">className="mt-2 flex items-end gap-0.5 h-5">
13	{m.bars.map((h,i)=>(
14	<div "color:#79c0ff">key={i} "color:#79c0ff">className={`flex-1 rounded-sm ${m.up?"bg-emerald-500/50":"bg-red-500/50"}`} "color:#79c0ff">style={{height:`${h}%`}} />
15	))}
16	</div>
17	</div>
18	))}
19	</div>
20	</div>

⬡ UIDrop Component20 lines

TypeScript ReactUTF-8