Text shimmer

TextShimmer sweeps a highlight across a line of text. It feels more polished than dots or blinking, so it is a good fit for generated summaries, AI copy, document scanning, and premium-feeling loading labels.

import { TextShimmer } from "@/components/loading-ui/text-shimmer";

export function TextShimmerDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/text-shimmer
Copy

Usage

Copyimport { TextShimmer } from "@/components/loading-ui/text-shimmer";

Copy<TextShimmer>Thinking</TextShimmer>

Customization

TextShimmer uses a text-clipped gradient. Keep the copy short enough that the sweep reads as progress instead of becoming a decorative headline.

Color

By default, TextShimmer derives both colors from currentColor, so it follows filled buttons, badges, and muted text automatically. Use baseColor and shimmerColor directly when you need explicit swatches.

import { TextShimmer } from "@/components/loading-ui/text-shimmer";

export function TextShimmerColor() {

Duration

Longer copy usually benefits from a slightly slower sweep.

import { TextShimmer } from "@/components/loading-ui/text-shimmer";

export function TextShimmerDuration() {

Spread

spread controls how wide the bright part of the sweep becomes.

import { TextShimmer } from "@/components/loading-ui/text-shimmer";

export function TextShimmerSpread() {

Examples

These examples use shimmer where the text itself is the loading surface: generated labels, assistant copy, and scan states.

Button

Inside filled buttons, the shimmer follows the button foreground automatically.

import { Button } from "@/components/ui/button";
import { TextShimmer } from "@/components/loading-ui/text-shimmer";

Badge

Shimmer badges are useful for generated or indexing states without adding a separate icon.

import { Badge } from "@/components/ui/badge";
import { TextShimmer } from "@/components/loading-ui/text-shimmer";

Input Group

Input addons can show that a prompt, query, or answer is being assembled.

import {
  InputGroup,
  InputGroupAddon,

Alert

Use alerts when the shimmer headline needs supporting context.

import {
  Alert,
  AlertDescription,