Skeleton
A skeleton loader component for displaying loading states. Provides a pulsing animation effect to indicate content is loading, improving perceived performance and user experience.
Installation
Import
Usage
The Skeleton component is essential for improving perceived performance during data loading. Use it to show placeholder content that matches the structure of the actual content that will load. This creates a smoother user experience and reduces perceived loading time. Common use cases include card layouts, text content, avatars, tables, and any structured content that takes time to load.
Design Guidelines
Skeleton loaders should match the approximate size and shape of the content they represent. Use rounded corners for avatars and images, rectangular shapes for text, and maintain consistent spacing. The pulsing animation provides clear visual feedback that content is loading. Ensure skeletons are replaced with actual content as soon as it's available to avoid confusion. Match the skeleton layout to your actual content structure for the best user experience.
Basic Usage
Simple skeleton with custom dimensions
Text Skeleton
Skeleton for text content with multiple lines
Card Skeleton
Skeleton layout for a card component
Avatar Skeleton
Circular skeleton for avatar images
Table Skeleton
Skeleton layout for table rows
Profile Skeleton
Skeleton layout for user profile
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply. Use this to set dimensions, border radius, and other styling |