Skeleton

The Skeleton component is a visual placeholder used during loading states.

It helps preserve layout structure, reduce layout shifts, and improve perceived performance — without introducing any product or data logic.

Skeleton is a pure UI primitive: it renders shapes, nothing more.

Import

import { Skeleton } from "@/components/ui/skeleton";

Usage

Use Skeleton to temporarily replace content while data is loading.

Skeleton does not manage loading state — that responsibility belongs to pages or data layers.

Basic example

<Skeleton className="h-4 w-2/3" />
<Skeleton className="h-4 w-1/2" />

Card loading state

Skeleton composes naturally with surface components like Card.

<Card>
  <CardHeader>
    <Skeleton className="h-5 w-1/3" />
    <Skeleton className="h-4 w-2/3" />
  </CardHeader>
  <CardContent>
    <Skeleton className="h-24 w-full" />
  </CardContent>
</Card>

Table loading state

Skeleton works well inside data-heavy components such as Table.

<Table>
  <TableBody>
    {Array.from({ length: 3 }).map((_, i) => (
      <TableRow key={i}>
        <TableCell>
          <Skeleton className="h-4 w-32" />
        </TableCell>
        <TableCell>
          <Skeleton className="h-4 w-24" />
        </TableCell>
        <TableCell>
          <Skeleton className="h-4 w-16" />
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Circular skeleton

Use the circle prop for avatars or icon placeholders.

<Skeleton circle className="h-10 w-10" />

API

Props

Skeleton also accepts all standard HTML div props:

React.HTMLAttributes<HTMLDivElement>

Accessibility

• Skeleton is rendered with aria-hidden
• It should never receive focus
• Replace skeletons with real content as soon as data is ready
• Skeletons are not announced to screen readers and should not be used as status messages

Design guidelines

• Match skeleton dimensions to the final content
• Avoid overly complex skeletons
• Prefer multiple simple skeletons over one large placeholder
• Do not animate beyond a subtle pulse — avoid distraction

When not to use Skeleton

Skeleton should not be used for:

• Error states
• Empty states
• Long-running background processes
• Global blocking overlays

Use Alert, EmptyState, or dedicated patterns instead.

Related guides