TetraKits UI Neon Gradient Strip ← Library

Neon Gradient Strip

Neon emerald-to-gray gradient strip with outer glow, rocket icon, and gradient text. Maximum-impact roadmap and evolving-project teasers for dark landing pages. Premium futuristic announcement component.

neon announcementgradient glow stripfuturistic banneremerald neon uiroadmap teaser
Live preview

Dependencies

react lucide-react
npm install lucide-react
import { Rocket } from "lucide-react";

export function NeonGradientStrip() {
  return (
    <div className="relative max-w-lg overflow-hidden rounded-2xl p-[1px] shadow-[0_0_48px_rgba(52,211,153,0.45),0_0_96px_rgba(52,211,153,0.15)]">
      <div className="absolute inset-0 bg-gradient-to-r from-emerald-400 via-green-500 to-zinc-500 opacity-90" />
      <div className="relative flex items-center gap-3 rounded-2xl bg-gradient-to-r from-zinc-950 via-zinc-900 to-zinc-950 px-5 py-3 shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]">
        <Rocket className="h-5 w-5 text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.8)]" />
        <p className="bg-gradient-to-r from-emerald-200 to-zinc-300 bg-clip-text text-sm font-semibold text-transparent">
          Project evolving — more features soon!
        </p>
      </div>
    </div>
  );
}