Skeleton
Live preview and documentation for the Skeleton component.
Preview
componentPreview.loading
About
Animated placeholder (bone) for content that's loading. KasySkeleton draws a rectangular or circular block; KasySkeletonGroup synchronizes the animation of every bone inside it.
KasySkeleton({ width, height, borderRadius }): rectangular bone.KasySkeleton.circle({ size }): circular bone (avatar, icon).borderRadius: corner radius of the rectangular bone; defaults toKasyRadius.smBorderRadius.KasySkeletonGroup(animation: KasySkeletonAnimation): controls the animation of all childKasySkeletonwidgets.shimmer(default): a highlight band sweeps left to right.pulse: all bones fade in and out together.none: static color, no animation.
Automatically respects the system's "reduce motion" setting (falls back to none). Wrap your loading layout in KasySkeletonGroup and swap it for the real content once the data arrives.
Last updated on 08/23/2026

