# shimmer

Utilities for adding a shimmer effect to text elements.

## Installation

```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/shimmer.json
```

[Registry JSON](https://reactdocs.canceydejean.dev/r/shimmer.json)

## Preview

```tsx
import { shimmerClass } from "@/lib/shimmer";

export function Preview() {
  return <p className={`${shimmerClass} text-sm text-muted-foreground`}>Generating response…</p>;
}
```


## Source

### lib/shimmer.ts

```ts
/**
 * Tailwind class helpers for text shimmer.
 * Requires `@import "shadcn/tailwind.css"` in your global CSS
 * (ships with the `shadcn` package).
 *
 * Prefer writing utility class names as string literals in markup so Tailwind
 * can see them at build time.
 *
 * @see https://ui.shadcn.com/docs/utils/shimmer
 */

/** Continuous shimmer on text (uses currentColor). */
export const shimmerClass = "shimmer";

/** Play a single sweep instead of looping. */
export const shimmerOnceClass = "shimmer shimmer-once";

/** Reverse the sweep direction. */
export const shimmerReverseClass = "shimmer shimmer-reverse";

/** Disable shimmer and render solid text. */
export const shimmerNoneClass = "shimmer-none";

export const shimmerDurationClasses = {
  1000: "shimmer-duration-1000",
  1100: "shimmer-duration-1100",
  2000: "shimmer-duration-2000",
} as const;

export const shimmerSpreadClasses = {
  4: "shimmer-spread-4",
  12: "shimmer-spread-12",
  24: "shimmer-spread-24",
} as const;

export const shimmerAngleClasses = {
  20: "shimmer-angle-20",
  45: "shimmer-angle-45",
} as const;

export const shimmerColorClasses = {
  blue: "shimmer-color-blue-500/60",
  brand: "shimmer-color-[#378ADD]",
} as const;
```



## Usage

Text shimmer for loading and “thinking…” states. Classes ship in
`shadcn/tailwind.css` — import that in your global CSS (or install the design
system [styles](/utilities/styles) item).

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

```tsx
import { shimmerClass } from "@/lib/shimmer";

<p className={`${shimmerClass} text-sm text-muted-foreground`}>
  Generating response…
</p>
```

Or use the utilities directly:

```tsx
<p className="shimmer text-muted-foreground">Generating response…</p>
<p className="shimmer shimmer-color-blue-500/60">Generating response…</p>
<p className="shimmer shimmer-duration-1000 shimmer-once">Response generated.</p>
```

| Class | Effect |
| --- | --- |
| `shimmer` | Looping sweep on text (`background-clip: text`) |
| `shimmer-once` | Single play |
| `shimmer-reverse` | Reverse direction |
| `shimmer-none` | Disable the effect |
| `shimmer-color-*` | Highlight color (theme color or arbitrary) |
| `shimmer-duration-<ms>` | Sweep duration in milliseconds |
| `shimmer-spread-<n>` | Highlight band width on the spacing scale |
| `shimmer-angle-<deg>` | Band tilt in degrees |

The effect tracks `currentColor`, adapts to dark mode, respects reduced motion, and follows reading direction in RTL.