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/vue/components/ShimmerText";Examples
Overview
Semantic elements
Controllable shimmer
API
ShimmerText: always shimmering
| Prop | Type | Default | Description |
|---|---|---|---|
as | "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "div" | HTML element to render |
default slot | VNode[] | — | Text content to shimmer |
class | 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 |
default slot | VNode[] | — | Text content to shimmer |
class | 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.