Recipes
Real-world component patterns. Each shows the source component and the auto-generated skeleton — same DOM, no duplication.
Profile card
Avatar, name, bio, action buttons. Border radius is inferred per leaf — the avatar becomes a circle, the buttons stay pill-shaped.
Loading content
Show code
<AutoSkeleton loading={loading}>
<UserCard />
</AutoSkeleton>Social feed
Repeating post structure. staggerChildren creates a wave-like reveal across rows.
Loading content
Show code
<AutoSkeleton loading={loading} staggerChildren={60}>
<Feed />
</AutoSkeleton>Form
Labels become text bones, inputs become rect bones, the primary button keeps its rounded shape.
Loading content
Show code
<AutoSkeleton loading={loading}>
<LoginForm />
</AutoSkeleton>Image grid
Loading content
Show code
<AutoSkeleton loading={loading}>
<ImageGrid />
</AutoSkeleton>Virtualized list
For lists with 50+ rows, use AutoSkeleton.List — it bypasses measurement entirely.
{loading ? (
<AutoSkeleton.List count={20} estimatedItemHeight={64} gap={8} />
) : (
<FlatList data={items} renderItem={renderRow} />
)}