Skip to main content

Skeleton

StorybookView in Storybook

Explore interactive examples and all component variations in our Storybook.

The Skeleton component provides loading placeholders that mimic the shape and size of content while it loads. With smooth shimmer animations and flexible sizing, it creates a better user experience during loading states. Perfect for cards, lists, profiles, and any content that needs loading indicators.

Basic Usage​

View in Storybook

With Repeat Property​

3 Lines

5 Lines

Card Skeleton​

Profile Skeleton​

List Skeleton​

Table Skeleton​

Interactive Loading Demo​

Different Shapes​

Text Lines

Avatars

Buttons

Images

Custom Shapes

Properties​

Skeleton​

PropertyTypeDefaultDescription
repeatnumber1Number of skeleton elements to render.
classNamestring-Additional CSS classes for custom styling.

Animation​

The Skeleton component uses a shimmer animation created with:

  • Gradient Background - Moving gradient from gray-300 via gray-100 to gray-300
  • CSS Animation - animate-shimmer class with 200% background size
  • Smooth Motion - Creates a natural loading effect that indicates activity

Accessibility​

The Skeleton component includes accessibility considerations:

  • Visual Indication - Clear visual indication that content is loading
  • Non-Interactive - Skeletons are not focusable or interactive
  • Semantic Structure - Maintains layout structure while loading
  • Screen Reader Friendly - Can be enhanced with aria-label for loading states

Common Use Cases​

The Skeleton component is perfect for:

  • Data Loading - API calls, database queries, and async operations
  • Image Loading - Placeholder while images download
  • Card Layouts - User profiles, product cards, and content cards
  • Lists & Tables - Data lists, user directories, and table rows
  • Navigation - Menu items and navigation elements during load
  • Forms - Form fields and input placeholders
  • Content Areas - Articles, posts, and text content

Best Practices​

  1. Match Content Shape - Make skeletons match the actual content dimensions
  2. Consistent Timing - Use consistent loading times across similar components
  3. Progressive Loading - Show skeletons immediately, don't delay
  4. Realistic Proportions - Use realistic widths and heights for text lines
  5. Smooth Transitions - Ensure smooth transition from skeleton to real content
  6. Appropriate Repeat - Use repeat property for consistent line counts
  7. Accessibility - Consider adding loading announcements for screen readers
  8. Performance - Use skeletons to improve perceived performance during loading