ShimmerText
Text with a bright band sweeping through it — the "Thinking…" look for a label that marks work in progress
Category: feedback · WCAG 2.2-AA · ai, loading, shimmer, thinking, text, progress
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | 'span' | 'p' | 'div' | span | `span` for inline text, `p` for a paragraph, `div` for a block that imposes no semantics of its own. |
children | ReactNode | — | The label text the shimmer sweeps through. |
Design tokens
--cascivo-shimmer-text-color--cascivo-shimmer-text-highlight--cascivo-color-text-muted--cascivo-color-ai--cascivo-duration-loop-slow
When to use
- Styling a short label that names work in progress — "Thinking…", "Searching the docs…"
- The trigger or heading of an AI surface while a response is being produced
When not to use
- Announcing status to assistive tech on its own — it is a visual treatment; wrap it in AiStatus or another role="status" region
- Body copy or anything longer than a line — the sweep is meant for a glanceable label
- Placeholder for content whose shape is known — use Skeleton
How to build an accessible ShimmerText in React →
Examples
Thinking label
<ShimmerText>Thinking…</ShimmerText>As a paragraph
<ShimmerText as="p">Searching 12 documents…</ShimmerText>