design-infraReport a problem or share feedback← Catalog
Skeleton Loader
curatedtheme-awarefreesmoothui/skeleton-loader
Animated skeleton loading placeholders
$
npx shadcn@latest add @smoothui/skeleton-loaderOur notes
Wrap real content in <Skeleton loading> and it renders an invisible copy with a pulsing overlay of exactly the same size — no hand-sized placeholder boxes, zero layout shift when data lands. No deps; bg-muted-foreground/20 + Tailwind animate-pulse. Does NOT honour reduced motion — add motion-reduce:animate-none. Pair with transitions/skeleton-reveal for the crossfade out.- Source
- SmoothUI
- Kind
- component
- Categories
- loader
- Use as
- wrapper — wraps your existing element
- Applies to
- loadercardtable
- Motion
- on loop · subtle · css · low cost · ignores reduced motion
- Tags
- skeleton, loader, loading, placeholder, shimmer, tween, complexity-low
- Licence
- MIT ("MIT License — Copyright (c) 2024 Eduardo Calvo", github.com/educlopez/smoothui).
- Live demo
- Interactive preview
- Docs
- smoothui.dev
Similar
Compare all 4 →- Noise Backgroundaceternity/noise-backgroundAnimated gradient + noise texture. Works for editorial/brutalist when toned down.
- Beam cardoc/beam-card♥ The user explicitly asked to keep Beam Card in the homepage examples while replacing the underwhelming loader. Retain its subtle beam emphasis.
- Glowing Effectaceternity/glowing-effectCursor-style border glow that follows the pointer. Works on any card.