Shimmer
Text that is being written or loaded, shown with a slow sheen.
Reading 4 files…
When to use it
Use Shimmer on the text of a status that’s in progress, such as “Thinking” or “Searching the docs.” The words stay readable while the sheen says work continues.
With reduced motion, the sheen stops and the text stays.
ShimmerThis page
Text on its way.
Reading 4 files…
Streaming answers and status lines.
How it behaves
Shimmer renders a span by default; use render to apply it to another element. Set active={false} when the work finishes to show the text normally.
The highlight derives from the text color, so it works on muted, foreground, or brand text, and brightens in dark mode. Reduced motion turns the sweep off.
Tune it with the theme's utility classes: shimmer-duration-1000 for speed, shimmer-spread-* for the band width, shimmer-angle-* for the tilt, and shimmer-once for a single sweep when a result arrives.
Use it for live status only, such as thinking, generating, or syncing. Pair it with Spinner when the row also needs an icon, and keep the text meaningful on its own.
Build it
Add it with the shadcn CLI:
1pnpm dlx shadcn@latest add https://jzbui.com/r/shimmer.jsonA complete example. Change the values to fit your product:
123456789import { Shimmer } from "@/components/ui/shimmer"
<Shimmer className="text-muted-foreground">Generating response…</Shimmer>
// Stop when the work finishes<Shimmer active={isWorking}>{isWorking ? "Reading 4 files…" : "Read 4 files"}</Shimmer>
// Tune with the theme utilities<Shimmer className="shimmer-duration-1000 shimmer-once">Response generated.</Shimmer>The full source is yours to edit once installed: