Shadcn.io is not affiliated with official shadcn/ui
LCD Text
Seven-segment LCD-style display where characters flicker through random glyphs before settling, with optional CRT scanlines and glow for React applications.
LCD Text preview
A retro digital readout for the web. Each character starts by rapidly cycling through random uppercase letters and digits — like a flight-board split-flap or a power-on self-test — then locks into its target glyph, with the lock-in cascading from left to right. A subtle CSS scan-line gradient overlays the text for that classic CRT feel, and an optional drop-shadow glow gives the characters their phosphor halo. Built with Motion for the per-character flicker timing and a stable seeded random so server and client agree. Drop it on a status badge, a launch countdown, a hero, or any moment that wants to feel a little bit Apollo-control-room.
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 lcd-text text effect into my projectRelated Components
Decrypted Text
Matrix-style decryption with character cycling
Scrambled Text
Proximity-based character scrambling with GSAP
Glitch Text
Digital glitch effects with RGB channel separation
Typing Text
Realistic typewriter effects with cursor blinking
Shuffle
Random character shuffling with settling animations
Counting Number
Animated counting numbers with smooth transitions
FAQ
Was this page helpful?
Sign in to leave feedback.
Kerning Text
Cursor-driven local kerning expansion that gently spreads letters apart wherever the pointer hovers, using a Gaussian falloff and direct DOM writes for smooth 60fps response in React, Next.js, and motion.
Line Shadow Text
Animated diagonal line shadow effect creating depth and motion for React applications.