Shadcn.io is not affiliated with official shadcn/ui
Regex Text
Source text with regex matches highlighted progressively as a single overlay slides between matches in React applications.
Regex Text preview
A code-aesthetic text effect that visualizes regex behavior the way a developer thinks about it. The full source string renders statically in a monospace stack, and a single colored highlight overlay morphs between matches one at a time — its left and width ease into each match, pause, then slide to the next. By default the cycle loops, so the highlight feels like a search cursor walking through the text. Pass any regex pattern (with optional flags via /pattern/flags syntax) and the component computes match offsets at mount, measures span positions with a ResizeObserver, and uses Motion for React's animate API to drive the overlay. Ideal for regex tools, learning resources, dev-tool docs, and any place a developer needs to see what a pattern matches at a glance.
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 regex-text text effect into my projectRelated Components
Syntax Text
Token-by-token monospace fade-in with light syntax colors
Diff Text
Git-diff style line animations with red and green
Typing Text
Realistic typewriter effect with blinking cursor
Decrypted Text
Matrix-style decryption with character cycling
Scrambled Text
Proximity-based character scrambling
Highlight Text
Animated marker highlight on scroll
FAQ
Was this page helpful?
Sign in to leave feedback.
Redact Text
Black redaction bars over selected words that slide off via clip-path on mount, hover, or click to reveal the hidden copy underneath in React, Next.js, and motion projects.
Relative Time Text
Live "5s ago" / "2m ago" / "3h ago" relative-time display that recomputes on an interval and cross-fades each unit change for React and Next.js apps using motion.