Skeleton
FeedbackPlaceholder components that indicate loading content. Use skeletons to show the shape of content while it loads, reducing perceived load time.
Import
import { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard } from "@/components/ui/skeleton";Usage
Basic Skeleton
Simple skeleton with custom dimensions
Text Skeleton
Pre-configured text placeholder
Avatar Skeleton
Circular placeholder for avatars
Card Skeleton
Full card loading placeholder
Product List Skeleton
Realistic loading state for a product list
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for custom sizing |
lines | number | 3 | Number of text lines (SkeletonText only) |