Components
Skeleton
A flexible loading placeholder with pulse, shimmer animations, and preset shapes.
The Skeleton component displays placeholder shapes while content is loading, reducing perceived layout shifts and improving user experience.
Usage
import { Skeleton, SkeletonAvatar, SkeletonText, SkeletonCard } from "@/components/ui/skeleton";
export function ExampleSkeleton() {
return (
<div className="space-y-4">
{/* Basic skeleton */}
<Skeleton className="h-6 w-48" />
{/* Shimmer animation */}
<Skeleton animation="shimmer" shape="circle" className="h-10 w-10" />
{/* Preset multi-line text */}
<SkeletonText lines={3} />
{/* Preset Skeleton Card */}
<SkeletonCard animation="shimmer" />
</div>
);
}Preview
Shapes & Basic Skeletons
Animation Variants (Pulse vs Shimmer)
Pulse (Default)
Shimmer Effect
Preset Helpers (Text, Button, Card)
Multi-line SkeletonText
SkeletonButtons
SkeletonCard
Custom Styling
Apply custom gradient shimmers, dark mode backgrounds, or exact dimensions via className:
<Skeleton animation="shimmer" className="h-12 w-full bg-slate-800/50 rounded-2xl border border-slate-700/50" />Styling & Class Names
Target internal skeleton CSS slots for custom overrides:
| Class Name | Element / Slot | Description |
|---|---|---|
.skeleton | Root placeholder | Skeleton container element with pulse/shimmer animation. |
skeleton--pulse | Pulse animation | Standard opacity fading animation. |
skeleton--shimmer | Shimmer animation | Linear gradient sweep shimmer animation. |
skeleton--circle | Circle shape | Circular border radius shape. |
skeleton--rounded | Rounded shape | Rounded corner box shape. |
API Reference
Skeleton.Root Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'primary' | 'default' | Background color tone variant. |
animation | 'pulse' | 'shimmer' | 'none' | 'pulse' | Animation effect while loading. |
shape | 'rounded' | 'circle' | 'square' | 'pill' | 'rounded' | Border radius shape. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Predefined height preset. |
SkeletonText Props
| Prop | Type | Default | Description |
|---|---|---|---|
lines | number | 3 | Number of text placeholder lines to render. |
lastLineWidth | string | '60%' | CSS width value for the final text line. |
SkeletonAvatar Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar placeholder dimensions. |
SkeletonButton Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Button placeholder size. |