Components · Loading and notifications
SkeletonSkeleton
A content placeholder while it loads
npx shadcn@latest add @umbra/skeletonA placeholder in the same shape as the upcoming content. Color --skeleton. No animation: a moving shimmer is decorative motion, and motion in Umbra only explains
When to use
- List rows, previews, text while data is loading
When not to use
- Unknown shape or a long process:
Spinner - Empty state: text saying “what happened and what to do”
Meetings
7 recordings this week
New recordingProcessing the recording
Team standupTue, 10:00 · 32 min
Designer interviewMon, 16:30 · 48 min
Call with contractorFri, 12:00 · 21 min
Mockup reviewThu, 11:00 · 54 min
Sprint retroWed, 17:00 · 40 min
Meeting with lawyerWed, 12:30 · 25 min
Metrics reviewTue, 15:00 · 36 min
Don’t
- Moving shimmer and pulsing
- A skeleton that outlasts loading or replaces a real empty state