Skeleton

Loading placeholder component with pulse animation for better user experience

Basic Shapes

Rectangle
20px
className="h-5 w-full"
Circle
48px
className="size-12 rounded-full"
Rounded
32px
className="h-8 w-64 rounded-xl"
Square
64px
className="size-16 rounded-lg"

Text Skeleton

Single Line
16px
className="h-4 w-3/4"
Title
28px
className="h-7 w-1/2"
Paragraph
auto
multiple lines
Multi-line Varied
auto
varied widths

Avatar + Text

User profile loading state

Props:
{ multiple: true }

Card Loading

Content card skeleton

Props:
{ complex: true }

List Item

Repeated list loading pattern

Props:
{ array: true }

Form Loading

Input fields skeleton

Props:
{ form: true }

Button Loading

Button placeholder states

Props:
{ size: "various" }

Icon Buttons

Icon-only button skeletons

Props:
{ icon: true }

Article Header

Blog post header skeleton

Props:
{ complex: true }

Stats Card

Dashboard stats loading

Props:
{ stats: true }

Table Row

Data table loading state

Props:
{ table: true }

Navigation Menu

Sidebar menu skeleton

Props:
{ nav: true }

Comment Thread

Discussion loading state

Props:
{ nested: true }

Media Grid

Image gallery loading

Props:
{ grid: true }

Timeline Item

Activity timeline loading

Props:
{ timeline: true }

Search Bar

Search input loading

Props:
{ search: true }

Profile Card

User profile loading state

Props:
{ profile: true }

Notification

Alert notification skeleton

Props:
{ notification: true }

Usage Guidelines

  • •Use skeleton screens for perceived performance - show content structure while loading
  • •Match skeleton shapes to actual content layout for seamless transition
  • •Combine multiple Skeleton components to build complex loading states
  • •Use animate-pulse is built-in for smooth loading animation
  • •Customize with Tailwind classes: adjust size, shape, and spacing as needed
  • •Consider showing 3-5 skeleton items for lists to indicate content loading
  • •Skeleton color automatically adapts to light/dark theme via CSS variables

Important Rules

  • ✗No shadows: Skeleton elements should NOT have box-shadow or any shadow effects
  • ✗No special borders: If using borders, the border color should match the fill color (var(--color-surface-300))
  • ✗No decorative elements: Avoid hover effects, transitions, or any interactive styling on skeleton elements
  • ✓Keep it flat: Use only flat, solid fills with the pulse animation for a clean loading state
  • ✓Container styling: When wrapping skeletons in cards/containers, remove shadows from containers during loading state