Skeleton

Loading placeholder with pulse animation. Use skeletons to indicate content that is loading, preserving layout structure while data is fetched.

Variants

Preview

default

text

circular

rectangular

Custom Sizes

Preview

Card Placeholder

Preview

Props

PropTypeDefaultDescription
variant"default" | "text" | "circular" | "rectangular""default"Shape preset for the skeleton placeholder.
widthstring | number-Custom width override. Accepts CSS values or pixel numbers.
heightstring | number-Custom height override. Accepts CSS values or pixel numbers.
classNamestring-Additional CSS classes.

Accessibility

  • Use aria-busy="true" on the parent container while content is loading
  • Add aria-label or aria-hidden="true" to skeleton elements as appropriate
  • The pulse animation respects prefers-reduced-motion when configured in Tailwind
  • Supports ref forwarding for DOM access