Skeleton Text for React

Skeleton Text stands in for text that's still loading: a few bars, a line each, with a soft band of light crossing them. When loading turns false the bars fade and the text comes in a word at a time, in the same place, so the moment it arrives feels deliberate rather than a flash. The bars and the text share one cell, so the taller of the two holds the height and nothing below them jumps.

Use it for text fetched after the page shows: a summary, a profile's bio, an assistant's answer, a card's title. For a placeholder with no text to become, such as an image or an avatar, use Skeleton; to show that someone is writing a reply, Typing Indicator Text. It's CSS only: loading sets a data attribute, and keyframe animations the install adds to your stylesheet draw the shimmer and bring the words in, with no script and no animation library. With reduced motion the bars hold still and the text simply appears.

Installation

Usage

import { SkeletonTextEffect } from "@/components/ui/skeleton-text";

<SkeletonTextEffect loading={isLoading} text={summary ?? ""} />

Demos

Card

lines is how many bars stand in for the text, 3 by default: one for a title, two or three for a paragraph. label is what screen readers hear while it loads, and stagger the time between one word and the next. Reloading turns loading back on, and the bars return.

Accessibility

While it loads, the text has aria-busy="true" and screen readers hear label, "Loading" by default; once loaded, they hear the text once, from a visually hidden copy, never the words one by one. The bars are hidden from them. The shimmer is a slow band of light, never a flash, and with reduced motion the bars hold still and the text appears without moving.

FAQ

API Reference