Shadcn.io is not affiliated with official shadcn/ui
React AI Shimmer
React AI shimmer component with animated text gradient effect for streaming and loading states
Shimmer preview
That shimmering text effect you see while AI is "thinking"? This is how you do it. Wrap any text in Shimmer and it gets an animated gradient that sweeps across, signaling to users that something's happening. The gradient width automatically scales based on how long the text is, which is a nice touch. You can control the speed with duration and how wide the shine is with spread. Works on any element—wrap a heading, a paragraph, whatever. We use this in reasoning blocks, plan titles, anywhere we want to indicate "still streaming" without a spinner.
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 AI component for you — no copy-paste, no CLI:
use shadcnio to install the shimmer AI component into my projectRelated Components
React AI Reasoning
Thinking display with shimmer
React AI Plan
Plan title with shimmer
React AI Loader
Spinning loader icon
React AI Message
Chat message bubbles
React AI Chain Of Thought
Reasoning steps
React AI Task
Task progress display
FAQ
Was this page helpful?
Sign in to leave feedback.