Documentation menu

Shimmer Text

A soft highlight moving through an AI thinking message.

Installation

pnpm dlx shadcn@latest add https://loading.design/r/shimmer-text.json

Usage

import { ShimmerText } from "@/components/loading/shimmer-text"
<ShimmerText text={"Thinking…"} size={14} speed={1.8} active={true} />

API

PropTypeDefaultDescription
textstringThinking…Visible status copy or the accumulated streamed response.
sizenumber14Text size in pixels.
speednumber1.8Animation duration in seconds. For streaming text, this is the character fade duration.
activebooleantrueWhether the animation is active. Disable when work finishes to hide the streaming cursor.
labelstringThinking…Accessible status label. Pass an empty string for decorative use.

Accessibility

The component exposes a polite status through its label. Use an empty label only when nearby text already communicates the loading state, or when the motion is purely decorative.