Shadcn Shimmer
React shimmer for loading labels and live status text. Built with TypeScript and Tailwind CSS for Next.js using Base UI — a highlight that sweeps currentColor.
A shimmer is a highlight that sweeps across text. Put shimmer on the line. The band is derived from currentColor, so muted copy and brand colors both work.
Usage
<p className="shimmer text-muted-foreground">Generating response…</p>The class is a CSS utility. No component import.
Composition
Ships in the shadcn Tailwind file. Same package as scroll-fade.
With Marker
A live status in a Marker. Spinner plus shimmering copy.
Color
shimmer-color-blue-500/60 or an arbitrary value. Default follows the text color.
Duration
shimmer-duration-1000 is one second per sweep. Default is 2000.
Spread
shimmer-spread-24 sets the band width. Default is 3ch + 40px.
Angle
shimmer-angle-45 tilts the band. Default is 20.
Play Once
shimmer-once for a single reveal when streaming finishes.
Disabling the Shimmer
shimmer-none turns it off. Works in any class order.
RTL
The sweep follows reading direction. shimmer-reverse flips it by hand.
API
| Class | What it does |
|---|---|
shimmer | Loop the highlight |
shimmer-once | One sweep |
shimmer-reverse | Opposite direction |
shimmer-none | Off |
shimmer-color-* | Highlight color |
shimmer-duration-* | ms per sweep |
shimmer-spread-* | Band width |
shimmer-angle-* | Tilt in degrees |
Notes
Prefers-reduced-motion is automatic
The animation stops and the text renders normally. Do not add a second reduced-motion rule.
With other components
Live status line
SpinnerNext to the label
SkeletonBlock placeholder
ButtonGenerating…
MessageAssistant is thinking
BadgeA short status
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Scroll Fade
React scroll fade for overflowing lists and carousels. Built with TypeScript and Tailwind CSS for Next.js using Base UI — mask edges that track the scroll.
AI SDK
React AI SDK helper for scripted chat previews and tests. Built with TypeScript and Tailwind CSS for Next.js using @shadcn/helpers — stream useChat with no model.