React AI Shimmer

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.

Shimmer preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/shimmer.json

npx shadcn@latest add https://www.shadcn.io/registry/shimmer.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/shimmer.json

bunx shadcn@latest add https://www.shadcn.io/registry/shimmer.json

Related Components

FAQ