Text shimmer
Show ongoing work with a calm light across the words.
pnpm dlx shadcn@latest add @uiarc/text-shimmerLive · keyboard ready
- AI thinking or loading labels such as Generating summary.
- Short status lines that should show ongoing work and settle when done.
- Use text-stream for the response text itself.
- Use skeleton for content placeholders and progress for measurable progress.
Installation
Add Text shimmer with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/text-shimmerAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { TextShimmer } from "@/registry/components/text-shimmer/text-shimmer"; export function AssistantStatus({ busy }: { busy: boolean }) { return ( <TextShimmer active={busy}> {busy ? "Generating summary" : "Summary ready"} </TextShimmer> );}TextShimmer
A calm light sweep across a short status line to show that work is ongoing. When active turns false the band glides off and the text settles to solid.
PropTypeDefaultDescription
childrenRequiredstring–The status text. Keep it to one short line. A new value rises in place.activebooleantrueSweep while work is ongoing.durationnumber1.8Seconds for one sweep across the text.as"span" | "p" | "div" | "h2" | "h3" | "h4""span"Rendered element.classNamestring–Merged onto the rendered element.idstring–Forwarded to the rendered element.- Sets aria-busy while active; the text itself stays real, readable text.
- Announce completion from your own aria-live region; the component does not.
- A bell-shaped highlight band in the current text color sweeps linearly over a muted base, pausing briefly between passes.
- The sweep only runs while active, in view, and the page is visible; a paused band resumes where it stopped. A changed label rises in with a soft blur.
- Reduced motion stops the sweep and swaps labels with a plain fade.
- Keeps max-width 100%, but the band is tuned for one short line, so avoid wrapping text.
- In forced-colors mode the gradient is removed and the text renders in the system color.
- The sweep runs only while active, within 64px of the viewport, and while the page is visible.
- It animates a background-clip gradient on one element, with no per-letter spans.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for AI thinking or loading labels. Pair with text-stream for the response itself, and use skeleton or progress for content placeholders.
- Flip active to false when work finishes instead of unmounting, so the text settles smoothly.
The full library index for assistants is at /llms.txt.