Shimmer Text
Text with a shimmer animation for loading and in-progress states, always on or toggled with a graceful stop.
import { ShimmerText, ShimmerableText } from "@plexui/ui/components/ShimmerText";Examples
Overview
Thinking...
Semantic elements
Heading shimmer
Paragraph shimmer effect
Inline shimmerControllable shimmer
Generating response...
API
ShimmerText: always shimmering
| Prop | Type | Default | Description |
|---|---|---|---|
as | "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "div" | HTML element to render |
children | ReactNode | — | Text content to shimmer |
className | string | — | Additional CSS classes |
ShimmerableText: controllable shimmer
| Prop | Type | Default | Description |
|---|---|---|---|
as | "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "div" | HTML element to render |
shimmer | boolean | false | Whether the shimmer animation is active |
children | ReactNode | — | Text content to shimmer |
className | string | — | Additional CSS classes |
Styling
Shimmer Text has no component tokens of its own. It reads the shared semantic color, typography and spacing tokens listed in Design tokens, so it follows theme changes made there.