Installation
npm install @marmoui/uiyarn add @marmoui/uipnpm add @marmoui/uibun add @marmoui/uiUsage
import { Skeleton } from '@marmoui/ui';Examples
Basic Skeleton
Default
Simple skeleton shapes
<div className="flex flex-col gap-3">
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />
<Skeleton className="h-4 w-5/6" />
</div>Card Skeleton
Card Loading State
Skeleton mimicking a card layout
<div className="border rounded-lg p-4 space-y-3">
<Skeleton className="h-6 w-1/3" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-4/5" />
<div className="flex gap-2 pt-2">
<Skeleton className="h-8 w-20 rounded" />
<Skeleton className="h-8 w-20 rounded" />
</div>
</div>Avatar Skeleton
Avatar with Text
Skeleton for a user profile row
<div className="flex items-center gap-3">
<Skeleton className="h-10 w-10 rounded-full" />
<div className="flex flex-col gap-1.5">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-3 w-24" />
</div>
</div>Best Practices
✓
Match content layout
Skeletons should closely match the shape and size of the final content.
✓
Use for predictable layouts
Skeleton works best when you know the structure of the incoming content.
✗
Don't show for fast loads
If content loads in under 300ms, skip the skeleton to avoid flickering.
✗
Don't animate too aggressively
The pulse animation should be subtle and calming, not distracting.
Props
Props
Accessibility
- Skeleton elements have
aria-hidden="true"as they are purely decorative. - Provide an
aria-busy="true"on the container element while loading. - Announce loading state to screen readers with
aria-liveregions.