Skeleton

Pulsing placeholder block that holds the space of content that is still loading.

Installation

pnpm dlx shadcn@latest add @ward/skeleton

Add the Ward registry to components.json once:

"registries": {
  "@ward": "https://ward.so/r/{name}.json"
}

Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/skeleton.json

Usage

import { Skeleton } from "@/components/ui/skeleton";
<div className="flex items-center gap-3">
  <Skeleton className="size-10 rounded-full" />
  <div className="grid gap-2">
    <Skeleton className="h-4 w-40" />
    <Skeleton className="h-4 w-24" />
  </div>
</div>

Props

PropTypeDefaultDescription
classNamestring-Size and shape the placeholder with utility classes, such as h-4 w-40 or size-10 rounded-full.

Ward · Version 1.0.0 · Registry manifest