Shadcn.io is not affiliated with official shadcn/ui
Skeleton Text
Shimmering skeleton loader bars that morph into actual text with per-word stagger reveal for React data-fetching and streaming states.
Skeleton Text preview
A loading state that doesn't waste the wait. Two or three skeleton bars of varying widths shimmer with a moving gradient — the same trick Linear, Vercel, and Stripe use to suggest "content is on its way." When the data lands, the bars cross-fade out and the real text fades in word-by-word with a small stagger, so the moment of arrival feels intentional instead of jarring. Drive it imperatively by passing loading=1, or skip the prop and let the component reveal automatically after a delay (handy for prototypes, optimistic UIs, or AI streaming placeholders). Accepts a single string or an array for multi-line content, and the bar widths are deterministic so SSR is hydration-safe.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the skeleton-text text effect into my projectRelated Components
Text Generate Effect
Progressive word-by-word generation
Blur Text
Text animation from blur to focus
Splitting Text
Character, word, or line splitting with timing
Shimmering Text
Wave-like color shimmer across text
Typing Text
Typewriter effect with blinking cursor
Text Cursor
Character trails that follow cursor movement
FAQ
Was this page helpful?
Sign in to leave feedback.