Shimmer

Installation

Follow the installation guide. Both utilities are included when you import SUI’s global styles:

@import "@workspace/ui/globals.css";

The utilities use the existing shadcn/tailwind.css import in globals.css; no additional stylesheet or React component is needed.

Usage

Add shimmer to a text element.

<p className="shimmer text-muted-foreground">Generating response&hellip;</p>

The shimmer is built on currentColor, so it adapts to the element:

• The highlight is derived from the text color, with no configuration needed.
• It works on any color, from text-muted-foreground to brand colors.
• In dark mode, the highlight automatically brightens to stay visible.

The effect is pure CSS. The text is painted with background-clip: text, and the highlight sweeps across it in a seamless loop.

With Marker

The shimmer composes with any component that renders text. A common pattern is a Marker showing a live status while the assistant is working:

<Marker role="status">
  <MarkerIcon>
    <Loader size="sm" label="Thinking" />
  </MarkerIcon>
  <MarkerContent className="shimmer">Thinking&hellip;</MarkerContent>
</Marker>

Color

Use shimmer-color-<color> to set the highlight color explicitly. It accepts theme colors with an optional opacity modifier, or any arbitrary color value.

<p className="shimmer shimmer-color-blue-500/60">Generating response&hellip;</p>
<p className="shimmer shimmer-color-[#378ADD]">Generating response&hellip;</p>

Duration

Use shimmer-duration-<number> to set the duration of one sweep in milliseconds. The default is 2000, i.e. 2s.

<p className="shimmer shimmer-duration-1000">Generating response&hellip;</p>

Spread

Use shimmer-spread-<number> to set the width of the highlight band using the spacing scale. The default is calc(3ch + 40px): a fixed base plus a 3ch term that scales with the font size.

<p className="shimmer shimmer-spread-24">Generating response&hellip;</p>

For one-off values, use an arbitrary length or percentage:

<p className="shimmer shimmer-spread-[5rem]">Generating response&hellip;</p>

Angle

Use shimmer-angle-<number> to set the tilt of the highlight band in degrees. The default is 20.

<p className="shimmer shimmer-angle-45">Generating response&hellip;</p>

Reverse

Use shimmer-reverse to sweep the highlight in the opposite direction. In RTL layouts the sweep already follows the reading direction. See RTL.

<p className="shimmer shimmer-reverse">Generating response&hellip;</p>

Play once

Use shimmer-once to play a single sweep instead of looping, useful as a reveal when streaming completes. Pair it with shimmer-duration-<number> to control how long the sweep takes.

<p className="shimmer shimmer-duration-1100 shimmer-once">
  Response generated.
</p>

Disabling the shimmer

Use shimmer-none to turn the effect off and render the text normally. It works in any class order, so the typical use is responsive or stateful:

<p className="shimmer md:shimmer-none">Generating response&hellip;</p>

Fallback

The shimmer is built on modern color features, relative color syntax and color-mix(), which are available in all current browsers. In older browsers without support, the highlight gradient is dropped and the text can render transparent. If you target older browsers, apply shimmer conditionally with a supports-* variant:

<p className="supports-[color:oklch(from_white_l_c_h)]:shimmer">
  Generating response&hellip;
</p>

Reduced motion

When the user prefers reduced motion, the animation is disabled automatically and the text renders normally. There is nothing to configure.

RTL

Set dir="rtl" on the container or use SUI’s DirectionProvider.

The sweep follows the reading direction, left to right in LTR and right to left in RTL, with no extra classes. Use shimmer-reverse to flip the direction manually.

Accessibility

Shimmer is a visual effect, not a status announcement. Use a suitable role="status" for loading text and avoid repeatedly replacing the accessible label. Keep the underlying text readable; use shimmer-none after the operation completes. For a loading indicator with a label, see Loader.