SkeletonText
v1.0.1Updated 20 Jul 2026A stack of placeholder bars standing in for a paragraph of copy. Renders `lines` bars at the given width, with the last bar shortened to 60% so the block reads as prose rather than a solid box. Use it wherever a run of text is still loading.
Preview
Live · 2 storiesDefaultOpen ↗
▸Why this is recommendedloadingplaceholdertextparagraph+3
The default, out-of-the-box SkeletonText.
Recommended for+14
- ✓Article body copy while the post loads
- ✓Product description placeholder
- ✓Comment text while a thread loads
- ✓Multi-line summary block during fetch
- ✓Any run of prose that has not arrived yet
Tags+6
loadingplaceholdertextparagraphlinesskeletondefault
Features+4
- Configurable line count
- Width as px number or CSS string
- Last line auto-shortened to 60% for a natural ragged edge
- Consistent 1.5 gap between bars
- Passes animation and intensity down to every bar
Not recommended for−2
- ✕A single heading bar (use Skeleton)
- ✕A whole card incl. title and footer (use SkeletonCard)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
linesHow many text bars to render. Defaults to 3.
—widthWidth of every line except the last. Defaults to '100%'.
—animationShimmer style. Defaults to 'pulse'.
—intensityPlaceholder contrast against the surface.
—