Shimmer

Keep an active text label readable while work continues.

Preview

Checking the deployment plan

Design guidance

Use Shimmer for a short label that describes actual work. Keep Spinner for a separate activity indicator. Shimmer does not own a live region, a timer or progress. Reduced motion and forced colors use static readable text.

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/shimmer.json

Basic usage

123import { Shimmer } from "@/components/ui/shimmer";

<Shimmer>Reviewing the release…</Shimmer>

Examples

Settled text

Set active={false} when the work settles.

The answer is ready

Motion preference

This uses the browser's actual reduced-motion preference. It does not simulate a user setting.

Checking the deployment plan

API reference

Shimmer properties
Prop	Type	Default	Description
`active`	`boolean`	`true`	Enables the text sweep; false preserves static text.
`duration`	`string`		Optional CSS duration. Prefer the default subtle sweep.
`Native span props / ref`	`HTMLAttributes<HTMLSpanElement>`		Preserves caller text, selection and semantics.