Back to components
UI component

Skeleton

Pulsing placeholder shapes for card, text, avatar, and custom layouts during loading.

Install

What it does

  • Pre-built variants: card, text, avatar, circle
  • Pulsing opacity animation
  • Custom dimensions via props
  • Composable for custom skeleton layouts

When to use

Use it

Content loading states — list placeholders, card skeletons, profile loading.

Skip it

Full-page loading (use loading-spinner instead), or final rendered content.

Files & routes added

  • components/ui/skeleton.tsx

Related components