primitives

Skeleton

Pulsing placeholder while async content loads. Match the rough shape of the eventual content, not a generic grey block.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/skeleton.json

Or import from the workspace package:

import { Skeleton } from "@8maverik8/design";

Examples

Card placeholder

<div className="flex w-full max-w-sm flex-col gap-3">
  <Skeleton className="h-4 w-1/2" />
  <Skeleton className="h-3 w-3/4" />
  <Skeleton className="h-3 w-2/3" />
</div>

Guidelines

Mirror the layout that's about to appear — same widths, same row heights.A skeleton that doesn't match the final layout causes a jarring relayout when data arrives.
Use a Skeleton when the load is faster than ~250ms.Sub-perceptible flashes look broken. A static neutral container is better.
Animate it differently from the standard `animate-pulse`.Mixed animation speeds across pages read as bugs.