A placeholder that mimics the shape of content while it loads. Supports text lines, circles (avatars), and rectangles (images/cards) with shimmer, pulse, or wave animations. When loading becomes false the skeleton fades out smoothly.
Show code Copy < nana-skeleton style = "width:220px;height:1rem" ></ nana-skeleton >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/skeleton " ;
< nana-skeleton style = " width:220px;height:1rem " ></ nana-skeleton >
Show code Copy < nana-skeleton animation = "shimmer" style = "width:220px;height:1rem" ></ nana-skeleton > < nana-skeleton animation = "pulse" style = "width:220px;height:1rem" ></ nana-skeleton > < nana-skeleton animation = "wave" style = "width:220px;height:1rem" ></ nana-skeleton > < nana-skeleton animation = "none" style = "width:220px;height:1rem" ></ nana-skeleton >
Use count to render several placeholder lines.
Show code Copy < nana-skeleton count = "3" style = "width:100%" ></ nana-skeleton >
Property Type Default Description shape'text' | 'circle' | 'rect''text'Shape of the skeleton placeholder size'sm' | 'md' | 'lg''md'Relative size animation'shimmer' | 'pulse' | 'wave' | 'none''shimmer'Animation style — shimmer, pulse, wave, or none countnumber1Number of skeleton items to render loadingbooleantrueWhen false the skeleton fades out and slotted content is visible
Slot Description (default)Optional content revealed when loading completes
Variable Default Description --nana-skeleton-radius— Corner radius override --nana-skeleton-height— Height override --nana-skeleton-width— Width override --nana-skeleton-gap— Gap between items when count > 1 --nana-skeleton-fade-duration— Fade-out transition duration (default 200ms)
Part Description baseEach skeleton item wrapperThe container wrapping all items (when count > 1)
Explore Skeleton interactively Every state, prop, and edge case — with live controls — in Storybook.
