Shadcn.io is not affiliated with official shadcn/ui
Neon Text
Authentic neon-sign aesthetic with layered text-shadow halo, startup flicker sequence, and ambient buzz animations built with React, Next.js, motion, and Tailwind CSS.
Neon Text preview
A real neon sign rendered in the browser. The glow is built from four layered text-shadow stops — sharp inner core, warm mid-halo, soft far halo, and an atmospheric outer bloom — so the text looks like it's lit from inside the glyph rather than wrapped in a flat outline. On mount, a startup-flicker sequence runs: four to six rapid on/off blinks at randomized intervals (under 600ms total) before the sign fully settles. Once on, an ambient buzz takes over: every few seconds a single character momentarily dims like a tired tube, while the whole sign breathes ever so slightly via Motion's useTime driving a low-amplitude sine on the shadow blur radius. Built for dark surfaces but degrades gracefully on light backgrounds. Configure the tube color, opt out of the startup flicker, and pass any class for typography. Pair it with a black hero, a midnight gradient, or a dim photo to get genuine 3 AM diner energy.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the neon-text text effect into my projectRelated Components
Flickering Text
Failing-fluorescent flicker with random per-character dropouts
Glitch Text
Digital glitch with RGB channel separation
LCD Text
Segmented seven-segment LCD aesthetic
Shimmering Text
Wave-like color shimmer across text
Gradient Text
Animated gradient sweeping through letters
Blur Text
Text animation from blur to focus
FAQ
Was this page helpful?
Sign in to leave feedback.
Motion Highlight
Dynamic background highlight that follows active items with smooth spring animations for React applications.
Outline Text
Hollow stroked text with a solid color fill that animates in from any direction on hover, view, loop, or always for React applications built with Next.js, motion, and Tailwind CSS.