Text Shimmer
Improve perceived performance with lightweight shimmer placeholders. Ideal for loading or “thinking” states to keep the interface active.
Preview
Calculating tokens
import { TextShimmer } from "@/registry/shimmer";
export function ShimmerDemo() {
return (
<p className="text-sm leading-relaxed">
<TextShimmer>Calculating tokens</TextShimmer>
</p>
);
}
Installation
pnpm dlx @arrowui/cli@latest add shimmerUsage
import { TextShimmer } from "@/registry/shimmer";<TextShimmer duration={4} spread={20}>Calculating tokens</TextShimmer>Examples
Duration
Control how long one full sweep takes with the duration prop (seconds). Shorter values feel snappier; longer ones read calmer.
Processing data · Analyzing patterns
import { TextShimmer } from "@/registry/shimmer";
export function ShimmerDurationDemo() {
return (
<p className="text-sm leading-relaxed">
<TextShimmer duration={1.5}>Processing data</TextShimmer>
<span className="text-muted-foreground"> · </span>
<TextShimmer duration={8}>Analyzing patterns</TextShimmer>
</p>
);
}
Spread
Spread sets how wide the bright band is (5–45). Low values keep a tight highlight; higher values soften the gradient across the text.
Loading components · Establishing connection
import { TextShimmer } from "@/registry/shimmer";
export function ShimmerSpreadDemo() {
return (
<p className="text-sm leading-relaxed">
<TextShimmer spread={8}>Loading components</TextShimmer>
<span className="text-muted-foreground"> · </span>
<TextShimmer spread={40}>Establishing connection</TextShimmer>
</p>
);
}
Props
Theme colors use muted-foreground and foreground with background-clip: text. Requires the arrow-text-shimmer keyframes in globals.css.