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 >
Properties Property Attribute Type Default Description animation— SkeletonAnimation'shimmer'Animation style — shimmer, pulse, wave, or none count— number1Number of skeleton items to render loading— booleantrueWhen false the skeleton fades out and slotted content is visible shape— SkeletonShape'text'Shape of the skeleton placeholder size— SkeletonSize'md'Relative size
Slots Slot Description (default)Optional content revealed when loading completes
CSS parts Part Description ::part(base)Each skeleton item ::part(wrapper)The container wrapping all items (when count > 1)
CSS custom properties Property Description --nana-skeleton-radiusCorner radius override --nana-skeleton-heightHeight override --nana-skeleton-widthWidth override --nana-skeleton-gapGap between items when count > 1 --nana-skeleton-fade-durationFade-out transition duration (default 200ms)
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.
