fetaUI
GitHub

Skeleton

A placeholder in the shape of content on its way, so nothing jumps when it arrives.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/skeleton
Playground
Shapes
Static
Profile
Team memberLOADING
Card
ArticleLOADING
Feed
ActivityLOADING
Form
Billing detailsLOADING
Table
InvoicesLOADING
Reveal
Members2 OF 4
Emma Collins
Design lead
Admin
Marco Jensen
Engineer
Admin
Shape
Icons animation
Shimmer
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/skeleton

Shapes

Line for text and pills, Circle for avatars, Block for media and inputs.

Shimmer
Motion

Accessibility

  • Shapes are hidden from assistive tech.
  • Skeleton Shell marks the region aria-busy.
  • Announce when content is ready.

Motion

  • An 8% sheen sweeps left to right in 1.6 s. It pauses offscreen.
  • Arriving content fades in with a 2 px blur over 240 ms, 40 ms per row.
  • With reduced motion, the sheen becomes a slow 2 s pulse and content only fades.

Responsive behavior

  • Inputs are 36 px on Web and 44 px on Mobile.
  • Shells fill their column, 358 px on Mobile.

Performance

  • The sheen is a CSS transform on a pseudo element, and it pauses off screen through one shared IntersectionObserver.
  • shimmer={false} drops the moving layer, so secondary parts add no animation.
  • SkeletonArrive animates once with Motion, then stays still. With reduced motion the sheen becomes a slow opacity pulse.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Compose layouts from Skeleton with shape (line, circle, block), width, height and shimmer, inside SkeletonShell.
  • SkeletonShell sets aria-busy on the region and shows a Spinner with status. Keep the real title in it.
  • Wrap real rows in SkeletonArrive with index as they replace shapes, for a 40 ms stagger.
  • The Reveal demo steps by button. Wire arrived to real loading.
/docs/components/skeleton/markdown
PreviousSpinner
NextAlert

Related

SpinnerComponentSays something is happening when the wait is short or unknown. Four kinds at five sizes.ProgressComponentShows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.AvatarComponentA person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.TableComponentNative table parts on one cell component, in Compact or Comfortable density and Plain or Grid style.Aspect RatioComponentHolds an image or video at a fixed ratio, so layouts never jump while media loads.