Shimmer

<Text color="muted">  <Shimmer>Thinking…</Shimmer></Text>

Installation

$ npx shadcn@latest add @constella/shimmer

Usage

import { Shimmer } from "@/components/ai/shimmer";import { Text } from "@/components/typography/text";

<Text color="muted">  <Shimmer>Generating response…</Shimmer></Text>

It takes the font and color of the text around it. On primary text the sweep doesn't show, since the sweep is primary text. Put it in secondary or muted text, such as a Text with color="muted". Under reduced motion the text stays still. Once the work is done, render the text without it.

Marker

Put it in a Marker for a status line in a conversation.

<Marker render={<output />}>  <MarkerContent>    <Shimmer>Searching the web…</Shimmer>  </MarkerContent></Marker>

API Reference

Shimmer

Takes every prop of <span>, plus: