Skeleton — Design System

In context

Four real loading layouts — dashboard tiles, inbox list, profile pane, and a report table — all preserving the destination layout.

Dashboard tiles

Four KPI tiles with sparkline strip.

Inbox

Five threads loading. Layout reserved.

Profile pane

Avatar, identity, details list.

Report table

Header row + 6 data rows. Skeleton replaces real cells.

Text block placeholder

Vary widths to mimic natural text line lengths. This prevents the skeleton from looking like a solid rectangle.

import { Skeleton } from '@mihcm/ui/Skeleton';
 
<div className="space-y-2">
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-5/6" />
</div>

Card loading state

Mirror the Card's actual layout with skeletons in the same positions as the final content.

import { Skeleton } from '@mihcm/ui/Skeleton';
import { Card, CardHeader, CardContent } from '@mihcm/ui/Card';
 
<Card>
  <CardHeader>
    <Skeleton className="h-5 w-40" />
    <Skeleton className="h-4 w-64" />
  </CardHeader>
  <CardContent>
    <Skeleton className="h-24 w-full" />
  </CardContent>
</Card>

Profile row placeholder

A circle + two lines pattern for user rows, comment threads, or team lists.

import { Skeleton } from '@mihcm/ui/Skeleton';
 
<div className="flex items-center gap-3">
  <Skeleton className="h-10 w-10 rounded-full" />
  <div className="space-y-1.5">
    <Skeleton className="h-4 w-32" />
    <Skeleton className="h-3 w-24" />
  </div>
</div>