Engineering
Jul 7, 2026·6 min read
Designing components for the AI-native web
Prompt bars, streaming states and thinking indicators are the new dropdowns. Here is how we design them.
Mouse-tracking spotlight cards, glass profiles, pricing with a working billing toggle, product cards and animated stats — the building blocks users actually interact with.
Spotlight Cards
Copy the component, paste it in your project, ship it. Zero config.
Every card adapts from mobile to ultra-wide without extra work.
Focus rings, contrast-safe text and semantic markup built in.
A radial glow follows your cursor across the card — move your mouse over them. The modern signature hover effect.
| 1 | function SpotlightCard({ children }: { children: React.ReactNode }) { |
| 2 | const ref = useRef<HTMLDivElement>(null); |
| 3 | const [pos, setPos] = useState({ x: -200, y: -200 }); |
| 4 | |
| 5 | return ( |
| 6 | <div |
| 7 | "color:#79c0ff">ref={ref} |
| 8 | onMouseMove={(e) => { |
| 9 | const r = ref.current!.getBoundingClientRect(); |
| 10 | setPos({ x: e.clientX - r.left, y: e.clientY - r.top }); |
| 11 | }} |
| 12 | "color:#79c0ff">onMouseLeave={() => setPos({ x: -200, y: -200 })} |
| 13 | "color:#79c0ff">className="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] p-6" |
| 14 | > |
| 15 | {/* spotlight */} |
| 16 | <div |
| 17 | "color:#79c0ff">className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100" |
| 18 | "color:#79c0ff">style={{ |
| 19 | background: `radial-gradient(340px circle at ${pos.x}px ${pos.y}px, rgba(139,92,246,0.18), transparent 65%)`, |
| 20 | }} |
| 21 | /> |
| 22 | <div "color:#79c0ff">className="relative">{children}</div> |
| 23 | </div> |
| 24 | ); |
| 25 | } |
Pricing Card — Billing Toggle
Billed $180 yearly
Flip between monthly and yearly billing — prices and savings badge update live.
| 1 | function PricingCard() { |
| 2 | const [yearly, setYearly] = useState(true); |
| 3 | |
| 4 | return ( |
| 5 | <div "color:#79c0ff">className="w-full max-w-sm rounded-3xl bg-gradient-to-b from-violet-500/40 to-transparent p-px"> |
| 6 | <div "color:#79c0ff">className="rounded-[23px] bg-[#0b0b16] p-7"> |
| 7 | <div "color:#79c0ff">className="flex items-center justify-between"> |
| 8 | <span "color:#79c0ff">className="text-sm font-bold text-white">Pro</span> |
| 9 | <button |
| 10 | "color:#79c0ff">onClick={() => setYearly(!yearly)} |
| 11 | "color:#79c0ff">className="flex items-center gap-2 rounded-full bg-white/[0.06] p-1 text-[10px] font-bold" |
| 12 | > |
| 13 | <span "color:#79c0ff">className={"rounded-full px-2.5 py-1 " + (!yearly ? "bg-white text-slate-900" : "text-white/45")}>Monthly</span> |
| 14 | <span "color:#79c0ff">className={"rounded-full px-2.5 py-1 " + (yearly ? "bg-white text-slate-900" : "text-white/45")}>Yearly</span> |
| 15 | </button> |
| 16 | </div> |
| 17 | <div "color:#79c0ff">className="mt-5 flex items-baseline gap-2"> |
| 18 | <span "color:#79c0ff">className="text-5xl font-extrabold text-white">${yearly ? 15 : 19}</span> |
| 19 | <span "color:#79c0ff">className="text-sm text-white/40">/month</span> |
| 20 | {yearly && <span "color:#79c0ff">className="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold text-emerald-400">SAVE 20%</span>} |
| 21 | </div> |
| 22 | {/* features + CTA … */} |
| 23 | </div> |
| 24 | </div> |
| 25 | ); |
| 26 | } |
Glass Profile Card
Design engineer · @ayushbuilds
128
Posts
12.4k
Followers
842
Following
Gradient banner, ring avatar, stat row and a working follow toggle — frosted glass over a glow.
| 1 | <div "color:#79c0ff">className="relative w-full max-w-xs overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] backdrop-blur-xl"> |
| 2 | {/* banner */} |
| 3 | <div "color:#79c0ff">className="h-24 bg-gradient-to-r from-violet-600 via-fuchsia-500 to-cyan-400" /> |
| 4 | |
| 5 | <div "color:#79c0ff">className="-mt-10 px-6 pb-6 text-center"> |
| 6 | <div "color:#79c0ff">className="mx-auto h-20 w-20 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 p-1 shadow-xl"> |
| 7 | <div "color:#79c0ff">className="flex h-full w-full items-center justify-center rounded-full bg-[#0b0b16] text-xl font-black text-white">AK</div> |
| 8 | </div> |
| 9 | <h3 "color:#79c0ff">className="mt-3 text-lg font-bold text-white">Ayush Kumar</h3> |
| 10 | <p "color:#79c0ff">className="text-sm text-white/40">Design engineer · @ayushbuilds</p> |
| 11 | |
| 12 | <div "color:#79c0ff">className="mt-5 grid grid-cols-3 divide-x divide-white/10 rounded-xl bg-white/[0.04] py-3"> |
| 13 | {[["128", "Posts"], ["12.4k", "Followers"], ["842", "Following"]].map(([v, l]) => ( |
| 14 | <div "color:#79c0ff">key={l}> |
| 15 | <p "color:#79c0ff">className="text-base font-extrabold text-white">{v}</p> |
| 16 | <p "color:#79c0ff">className="text-[10px] uppercase tracking-wider text-white/35">{l}</p> |
| 17 | </div> |
| 18 | ))} |
| 19 | </div> |
| 20 | |
| 21 | <button "color:#79c0ff">className="mt-5 w-full rounded-xl bg-white py-2.5 text-sm font-bold text-slate-900 transition hover:bg-slate-100 active:scale-[0.99]"> |
| 22 | Follow |
| 23 | </button> |
| 24 | </div> |
| 25 | </div> |
Product Card
Headphones
Image zoom on hover, working wishlist toggle, rating, strikethrough price and an add-to-cart reveal.
| 1 | <div "color:#79c0ff">className="group w-full max-w-xs overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03]"> |
| 2 | {/* image */} |
| 3 | <div "color:#79c0ff">className="relative h-48 overflow-hidden"> |
| 4 | <div "color:#79c0ff">className="absolute inset-0 bg-gradient-to-br from-indigo-500 via-violet-600 to-fuchsia-600 transition-transform duration-500 group-hover:scale-110" /> |
| 5 | <span "color:#79c0ff">className="absolute left-3 top-3 rounded-full bg-black/50 px-2.5 py-1 text-[10px] font-bold text-white backdrop-blur">-25%</span> |
| 6 | <button "color:#79c0ff">className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/50 text-white/80 backdrop-blur transition hover:text-rose-400"> |
| 7 | <HeartIcon "color:#79c0ff">className="h-4 w-4" /> |
| 8 | </button> |
| 9 | {/* add-to-cart slides up on hover */} |
| 10 | <button "color:#79c0ff">className="absolute inset-x-3 bottom-3 translate-y-14 rounded-xl bg-white py-2.5 text-sm font-bold text-slate-900 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"> |
| 11 | Add to cart |
| 12 | </button> |
| 13 | </div> |
| 14 | {/* body */} |
| 15 | <div "color:#79c0ff">className="p-4"> |
| 16 | <div "color:#79c0ff">className="flex items-center justify-between"> |
| 17 | <p "color:#79c0ff">className="text-[11px] font-semibold uppercase tracking-wider text-violet-400">Headphones</p> |
| 18 | <div "color:#79c0ff">className="flex items-center gap-1 text-[11px] font-bold text-amber-400">★ 4.9 <span "color:#79c0ff">className="font-medium text-white/30">(214)</span></div> |
| 19 | </div> |
| 20 | <h3 "color:#79c0ff">className="mt-1 font-bold text-white">Nebula ANC Pro</h3> |
| 21 | <div "color:#79c0ff">className="mt-2 flex items-baseline gap-2"> |
| 22 | <span "color:#79c0ff">className="text-lg font-extrabold text-white">$249</span> |
| 23 | <span "color:#79c0ff">className="text-sm text-white/30 line-through">$329</span> |
| 24 | </div> |
| 25 | </div> |
| 26 | </div> |
Animated Stat Cards
Monthly revenue
Active users
Churn rate
KPI tiles with growing sparkline bars, delta chips and icon accents — the dashboard staple, polished.
| 1 | const stats = [ |
| 2 | { label: "Monthly revenue", value: "$48.2k", delta: "+18.2%", up: true, |
| 3 | bars: [35, 55, 42, 68, 50, 78, 64, 92], |
| 4 | grad: "from-violet-600 to-fuchsia-500" }, |
| 5 | { label: "Active users", value: "12,840", delta: "+9.4%", up: true, |
| 6 | bars: [30, 44, 38, 56, 48, 62, 60, 74], |
| 7 | grad: "from-cyan-500 to-blue-600" }, |
| 8 | { label: "Churn rate", value: "1.9%", delta: "-0.4%", up: false, |
| 9 | bars: [55, 50, 52, 44, 46, 40, 38, 32], |
| 10 | grad: "from-emerald-500 to-teal-600" }, |
| 11 | ]; |
| 12 | |
| 13 | {stats.map((s) => ( |
| 14 | <div "color:#79c0ff">key={s.label} "color:#79c0ff">className="rounded-2xl border border-white/10 bg-white/[0.03] p-5 transition-colors hover:border-white/20"> |
| 15 | <p "color:#79c0ff">className="text-xs font-semibold uppercase tracking-wider text-white/40">{s.label}</p> |
| 16 | <div "color:#79c0ff">className="mt-2 flex items-baseline gap-2.5"> |
| 17 | <span "color:#79c0ff">className="text-3xl font-extrabold tracking-tight text-white">{s.value}</span> |
| 18 | <span "color:#79c0ff">className={"rounded-full px-2 py-0.5 text-[10px] font-bold " + |
| 19 | (s.up ? "bg-emerald-500/15 text-emerald-400" : "bg-rose-500/15 text-rose-400")}> |
| 20 | {s.delta} |
| 21 | </span> |
| 22 | </div> |
| 23 | <div "color:#79c0ff">className="mt-4 flex h-10 items-end gap-1"> |
| 24 | {s.bars.map((h, i) => ( |
| 25 | <div |
| 26 | "color:#79c0ff">key={i} |
| 27 | "color:#79c0ff">className={"flex-1 origin-bottom rounded-sm bg-gradient-to-t " + s.grad} |
| 28 | "color:#79c0ff">style={{ height: h + "%", animation: "barGrow .7s " + i * 0.06 + "s both" }} |
| 29 | /> |
| 30 | ))} |
| 31 | </div> |
| 32 | </div> |
| 33 | ))} |
| 34 | |
| 35 | /* @keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } */ |
Gradient Border Cards
Deploy to 300+ locations with zero cold starts.
Learn more →Bank-grade encryption on every request by default.
Learn more →The p-px gradient wrapper trick — a glowing border with a dark body that lifts on hover.
| 1 | <div "color:#79c0ff">className="group rounded-2xl bg-gradient-to-br from-violet-500/60 via-transparent to-cyan-400/60 p-px transition-transform hover:-translate-y-1"> |
| 2 | <div "color:#79c0ff">className="rounded-[15px] bg-[#0b0b16] p-6"> |
| 3 | <div "color:#79c0ff">className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-violet-600 to-indigo-600 shadow-lg shadow-violet-500/30"> |
| 4 | <BoltIcon "color:#79c0ff">className="h-5 w-5 text-white" /> |
| 5 | </div> |
| 6 | <h3 "color:#79c0ff">className="mt-4 font-bold text-white">Edge runtime</h3> |
| 7 | <p "color:#79c0ff">className="mt-1.5 text-sm leading-relaxed text-white/45"> |
| 8 | Deploy to 300+ locations with zero cold starts. |
| 9 | </p> |
| 10 | <span "color:#79c0ff">className="mt-4 inline-flex items-center gap-1 text-xs font-bold text-violet-300"> |
| 11 | Learn more <span "color:#79c0ff">className="transition-transform group-hover:translate-x-1">→</span> |
| 12 | </span> |
| 13 | </div> |
| 14 | </div> |
Testimonial Card
Swapped our entire design system for these components. Shipped the redesign in a week instead of a quarter.
Sarah Rodriguez
CTO, Lumina Labs
Star rating, oversized quote mark and a verified author row on frosted glass.
| 1 | <figure "color:#79c0ff">className="relative w-full max-w-sm rounded-3xl border border-white/10 bg-white/[0.04] p-7 backdrop-blur"> |
| 2 | <span "color:#79c0ff">className="absolute -top-1 right-6 select-none text-7xl font-black leading-none text-violet-500/20">"</span> |
| 3 | <div "color:#79c0ff">className="flex gap-0.5 text-amber-400">★★★★★</div> |
| 4 | <blockquote "color:#79c0ff">className="mt-4 text-[15px] leading-relaxed text-white/80"> |
| 5 | Swapped our entire design system for these components. |
| 6 | Shipped the redesign in a week instead of a quarter. |
| 7 | </blockquote> |
| 8 | <figcaption "color:#79c0ff">className="mt-6 flex items-center gap-3"> |
| 9 | <div "color:#79c0ff">className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 text-xs font-black text-white">SR</div> |
| 10 | <div> |
| 11 | <p "color:#79c0ff">className="flex items-center gap-1.5 text-sm font-bold text-white"> |
| 12 | Sarah Rodriguez |
| 13 | <VerifiedIcon "color:#79c0ff">className="h-3.5 w-3.5 text-sky-400" /> |
| 14 | </p> |
| 15 | <p "color:#79c0ff">className="text-xs text-white/40">CTO, Lumina Labs</p> |
| 16 | </div> |
| 17 | </figcaption> |
| 18 | </figure> |
AI Usage Card
AI Credits
✦ GPT-5 TurboAnimated SVG progress ring, token meters and a model badge — for AI product dashboards.
| 1 | <div "color:#79c0ff">className="w-full max-w-sm rounded-3xl border border-white/10 bg-white/[0.03] p-6"> |
| 2 | <div "color:#79c0ff">className="flex items-center justify-between"> |
| 3 | <p "color:#79c0ff">className="text-sm font-bold text-white">AI Credits</p> |
| 4 | <span "color:#79c0ff">className="rounded-full border border-violet-400/30 bg-violet-500/10 px-2.5 py-1 text-[10px] font-bold text-violet-300">✦ GPT-5 Turbo</span> |
| 5 | </div> |
| 6 | |
| 7 | <div "color:#79c0ff">className="mt-5 flex items-center gap-6"> |
| 8 | {/* progress ring: r=44 → C ≈ 276; offset = C × (1 − 0.72) ≈ 77 */} |
| 9 | <div "color:#79c0ff">className="relative h-28 w-28"> |
| 10 | <svg viewBox="0 0 100 100" "color:#79c0ff">className="h-full w-full -rotate-90"> |
| 11 | <circle cx="50" cy="50" r="44" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="9" /> |
| 12 | <circle cx="50" cy="50" r="44" fill="none" stroke="url(#g)" strokeWidth="9" |
| 13 | strokeLinecap="round" strokeDasharray="276" strokeDashoffset="77" /> |
| 14 | <defs> |
| 15 | <linearGradient "color:#79c0ff">id="g" x1="0" y1="0" x2="1" y2="1"> |
| 16 | <stop offset="0%" stopColor="#8b5cf6" /><stop offset="100%" stopColor="#22d3ee" /> |
| 17 | </linearGradient> |
| 18 | </defs> |
| 19 | </svg> |
| 20 | <div "color:#79c0ff">className="absolute inset-0 flex flex-col items-center justify-center"> |
| 21 | <span "color:#79c0ff">className="text-2xl font-extrabold text-white">72%</span> |
| 22 | <span "color:#79c0ff">className="text-[9px] uppercase tracking-wider text-white/35">used</span> |
| 23 | </div> |
| 24 | </div> |
| 25 | |
| 26 | <div "color:#79c0ff">className="flex-1 space-y-3"> |
| 27 | {[["Chat", "48.2k", "w-3/4 from-violet-500 to-fuchsia-500"], |
| 28 | ["Image", "12.9k", "w-1/2 from-cyan-500 to-blue-500"], |
| 29 | ["Code", "31.5k", "w-2/3 from-emerald-500 to-teal-500"]].map(([l, v, w]) => ( |
| 30 | <div "color:#79c0ff">key={l}> |
| 31 | <div "color:#79c0ff">className="flex justify-between text-[11px]"><span "color:#79c0ff">className="text-white/50">{l}</span><span "color:#79c0ff">className="font-bold text-white/80">{v}</span></div> |
| 32 | <div "color:#79c0ff">className="mt-1 h-1.5 rounded-full bg-white/8"> |
| 33 | <div "color:#79c0ff">className={"h-full rounded-full bg-gradient-to-r " + w} /> |
| 34 | </div> |
| 35 | </div> |
| 36 | ))} |
| 37 | </div> |
| 38 | </div> |
| 39 | |
| 40 | <button "color:#79c0ff">className="mt-5 w-full rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/25 transition hover:shadow-violet-500/50"> |
| 41 | Upgrade plan |
| 42 | </button> |
| 43 | </div> |
Content Card
Prompt bars, streaming states and thinking indicators are the new dropdowns. Here is how we design them.
Cover gradient with floating tag, meta row and an underline-on-hover title.
| 1 | <article "color:#79c0ff">className="group w-full max-w-sm cursor-pointer overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] transition-all hover:-translate-y-1 hover:border-white/20 hover:shadow-2xl"> |
| 2 | <div "color:#79c0ff">className="relative h-40 overflow-hidden"> |
| 3 | <div "color:#79c0ff">className="absolute inset-0 bg-gradient-to-br from-fuchsia-600 via-violet-600 to-indigo-700 transition-transform duration-500 group-hover:scale-105" /> |
| 4 | <span "color:#79c0ff">className="absolute left-4 top-4 rounded-full bg-black/45 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-white backdrop-blur">Engineering</span> |
| 5 | </div> |
| 6 | <div "color:#79c0ff">className="p-5"> |
| 7 | <div "color:#79c0ff">className="flex items-center gap-2 text-[11px] text-white/35"> |
| 8 | <span>Jul 7, 2026</span><span>·</span><span>6 min read</span> |
| 9 | </div> |
| 10 | <h3 "color:#79c0ff">className="mt-2 text-lg font-bold leading-snug text-white decoration-violet-400 underline-offset-4 group-hover:underline"> |
| 11 | Designing components for the AI-native web |
| 12 | </h3> |
| 13 | <p "color:#79c0ff">className="mt-2 line-clamp-2 text-sm text-white/45"> |
| 14 | Prompt bars, streaming states and thinking indicators are the new dropdowns… |
| 15 | </p> |
| 16 | </div> |
| 17 | </article> |