Four patterns, one API

All skeletons auto-generated by skeletal-ui analyze. Toggle loading and animation to inspect the output.

rscDemoSSR.skeleton.tsx

📝

Engineering

Skeleton screens eliminate layout shift and improve perceived performance.

Jordan Kim·5 min read·Apr 8, 2026

csrDemoCard.skeleton.tsx

Alex Rivera

Senior Engineer

Building developer tools at the intersection of DX and performance.

142Commits

38PRs

4.9Rating

lazyDemoDynamic.skeleton.tsx

Weekly activity

+12%

MonTueWedThuFriSatSun

Pattern	Trigger	What skeletal-ui does
rsc	`async component in <SkeletonWrapper>`	generates skeleton, adds fallback prop
csr	`non-async component in <SkeletonWrapper>`	generates skeleton, adds fallback prop
lazy	`React.lazy(() => import(...))`	generates skeleton, replaces with lazyWithSkeleton
dynamic	`next/dynamic(() => import(...))`	generates skeleton, replaces with dynamicWithSkeleton

Sk.* Primitives

Pure CSS, zero dependencies, server-safe. import { Sk } from 'skeletal-ui'

Sk.Text

Sk.Heading

Sk.Avatar

Sk.Image

Sk.Button

Sk.Badge

Sk.Number

Sk.Icon

Sk.List

Sk.Card