shimmer

export default function ShimmerDemo() {
  return (
    <p className="shimmer text-sm text-muted-foreground">

Installation#

If your project was set up with the shadcn CLI (bunx shadcn@latest init), you already have shimmer. It ships with the shadcn package, which the CLI imports in your global CSS file.

Otherwise, install the shadcn package:

pnpmnpmyarnbun
bun add shadcn
Copy

Then import the shared utilities in your global CSS file:

Copy@import "tailwindcss";
@import "shadcn/tailwind.css";

Usage#

Add shimmer to a text element.

Copy<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:

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"
import { Spinner } from "@/components/ui/spinner"

Copy<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </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.

export default function ShimmerColor() {
  return (
    <div className="flex flex-col items-center gap-2 text-sm text-muted-foreground">

Copy<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.

export default function ShimmerDuration() {
  return (
    <div className="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">

Copy<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.

export default function ShimmerSpread() {
  return (
    <div className="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">

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

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

Copy<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.

export default function ShimmerAngle() {
  return (
    <div className="mx-auto grid w-full max-w-lg gap-6 text-center text-sm text-muted-foreground sm:grid-cols-2">

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

Reverse#

Use shimmer-reverse to sweep the highlight in the opposite direction.

Copy<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.

"use client"

import * as React from "react"

Copy<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:

export default function ShimmerNone() {
  return (
    <div className="flex flex-col items-center gap-3 text-sm text-muted-foreground">

Copy<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:

Copy<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.