SkeletonAvatar
v1.0.1Updated 20 Jul 2026A circular placeholder standing in for a profile picture while user data loads. Ships six preset sizes from xs (20px) to 2xl (72px) so it lines up with whatever avatar it replaces. Pick the size that matches the real avatar and the row will not reflow when data arrives.
Preview
Live · 4 storiesSizesOpen ↗
▸Why this is recommendedloadingplaceholderavatarcircle+3
Every SkeletonAvatar size lined up for comparison.
Recommended for+14
- ✓Profile picture placeholder while a user loads
- ✓Avatar column in a loading comment list
- ✓Author photo in a loading article header
- ✓Team member grid during initial fetch
- ✓Chat participant avatar before history arrives
Tags+6
loadingplaceholderavatarcircleprofileskeletonsizes
Features+4
- Six preset sizes: xs / sm / md / lg / xl / 2xl
- Exact pixel sizing (20/24/32/40/56/72)
- Inherits animation and intensity from Skeleton
- Circular by default via rounded-full
- Overridable size through className or style
Not recommended for−2
- ✕Square or rounded-rect thumbnails (use Skeleton with className)
- ✕A full user row incl. name (use SkeletonRow)
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
sizePreset diameter in px (20/24/32/40/56/72). Defaults to 'md'.
—animationShimmer style. Defaults to 'pulse'.
—intensityPlaceholder contrast against the surface.
—