shadcn.io is not affiliated with official shadcn/ui
A band of light sweeps across the text and loops until the class comes off.
Use it on a status line while an answer streams or a tool runs, such as Thinking or Reading 4 files. It is a set of Tailwind CSS utilities, not a component, so it goes on any element that holds text. These are shadcn/ui's shimmer classes, the ones shadcn/tailwind.css ships, with one fix for RTL.
Generating response…
Installation
The command adds the utilities to your global CSS file. A project that imports shadcn/tailwind.css already has them, so skip it there. Components that use the class, such as Attachment, install it with them.
Usage
<p className="shimmer text-muted-foreground text-sm">
Generating response…
</p>| Class | What it does |
|---|---|
shimmer | Paints the text with a gradient (background-clip: text) and sweeps it with tw-shimmer, linear, on a loop. |
shimmer-once | Plays one sweep, then stops. |
shimmer-reverse | Sweeps the other way. |
shimmer-none | Turns the effect off, in any class order. |
shimmer-color-<color> | Sets the highlight to a theme color, with an optional /<opacity>. |
shimmer-color-[<value>] | Sets the highlight to any color. |
shimmer-duration-<number> | Sets one sweep in milliseconds. The default is 2000. |
shimmer-spread-<number> | Sets the band's width on the spacing scale. The default is calc(3ch + 40px). |
shimmer-spread-[<value>] | Sets the band's width to any length or percentage. |
shimmer-angle-<number> | Sets the band's tilt in degrees. The default is 20. |
The highlight is built from currentColor, so it follows the text: muted text gets a muted highlight, and a brand color gets a brand highlight. In dark mode it brightens to stay visible. It is CSS only, with no script and no timer.
Demos
Marker
A Marker with a spinner says Thinking..., and a separator row says Reading 4 files. The class goes on MarkerContent, so the words move and the icon and the rule stay still. role is status on each marker so assistive tech reads the text when it changes. The motion itself announces nothing.
Color
Two lines in muted text, one with shimmer-color-blue-500/60, a theme color at 60 percent, and one with shimmer-color-[#378ADD], an arbitrary hex. Set a color when the default highlight is too faint on your text, or when the line sits on a branded surface. Keep the text color readable on its own, because the highlight passes over it and moves on.
Duration
The default sweep next to shimmer-duration-1000, which takes one second. The number is milliseconds. A fast sweep reads as urgent, so keep the default for a status that may stay up for a while.
Spread
shimmer-spread-4 and shimmer-spread-24: a narrow glint and a wide band. The number is on the spacing scale, like p-4. For a one-off width, shimmer-spread-[5rem] takes any length or percentage.
Angle
The default tilt of 20 degrees next to shimmer-angle-45. The angle shows more on large text than on a small label.
Once
One sweep of 1.1 seconds, from shimmer-once with shimmer-duration-1100, then the text rests. Replay gives the line a new key, which mounts it again and restarts the sweep. Use it as a finish when a response is done, not on a status that is still running.
None
shimmer md:shimmer-none sweeps on a narrow screen and stops from md up. shimmer-none wins whatever the class order, so a variant or a state can turn the effect off, such as data-[done]:shimmer-none when the work finishes.
RTL
An English line with dir="ltr" and an Arabic one with dir="rtl". The sweep follows the reading direction, right to left in RTL, with no extra class. shimmer-reverse flips the direction by hand. The class goes by the nearest dir attribute, so a dir="ltr" line inside an RTL page, such as code, still sweeps left to right. shadcn/ui's version sweeps that line backwards.
FAQ
What does the shimmer do when someone prefers reduced motion?
It stops, and the text renders in its own color. The utility drops the animation and the gradient under prefers-reduced-motion: reduce, with nothing to configure. That holds for a variant such as md:shimmer too, and for a plain .shimmer class outside Tailwind's utilities.
My project imports shadcn/tailwind.css. Do I need this?
No. shadcn/tailwind.css ships the same shimmer utilities, so the classes already work. This install is for a project without that import. With both, nothing breaks, but every shimmer rule ends up in your built CSS twice. The command writes its rules after the import, so they win, RTL included.
How do I stop the shimmer when the work is done?
Remove the class, or add shimmer-none with a state, such as data-[done]:shimmer-none, which wins in any class order. To end on a single pass, swap the loop for shimmer-once when the work completes. The Once demo shows a single sweep.
Why is the highlight hard to see on my text?
The highlight comes from the text color: in light mode it is the same color at a fifth of its alpha, so a pale or very dark label gives a faint band. Set it with shimmer-color-<color>, such as shimmer-color-blue-500/60, or widen the band with shimmer-spread-<number>.
Which browsers does the shimmer work in?
It uses relative color syntax and color-mix(), which every current browser supports. In an older browser the gradient is dropped and the text can render transparent. If you support those, apply the class behind a feature check: supports-[color:oklch(from_white_l_c_h)]:shimmer.
Does the shimmer tell screen reader users anything?
No. It is a visual effect and has no role or label. Put the meaning in the text, and set role="status" on the element that holds it when the text changes on its own, as the Marker demo does. The words have to say what is happening, because motion on an empty label tells nobody anything.
How do I install shimmer in React?
Run the command in the Installation section on this page. It adds the shimmer utilities to your global CSS file and no component file. Components that use the class, such as Attachment, list it as a dependency and install it with them.
API Reference
Shimmer
shimmerclassshimmer-onceclassshimmer-reverseclassshimmer-noneclassshimmer-color-*classshimmer-duration-*classshimmer-spread-*classshimmer-angle-*class