Skeleton

A shimmering placeholder shown while content loads.

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

export default function SkeletonList() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {[0, 1, 2].map((i) => (
        <div key={i} className="flex items-center gap-3">
          <Skeleton className="size-8 shrink-0 rounded-full" />
          <div className="flex flex-1 flex-col gap-2">
            <Skeleton className="h-3.5 w-2/5" />
            <Skeleton className="h-3 w-3/5" />
          </div>
        </div>
      ))}
    </div>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add skeleton
pnpm dlx shadcn@latest add @jarvis/skeleton

Usage

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

export function ProfileSkeleton() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="size-8 rounded-full" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-3.5 w-2/5" />
        <Skeleton className="h-3 w-3/5" />
      </div>
    </div>
  );
}

Size each skeleton to match the content it stands in for, so nothing shifts when it loads.

Skeletons are hidden from screen readers. Set aria-busy on the loading region, or add visually hidden text such as "Loading projects".

Examples

Card

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

export default function SkeletonCard() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3 rounded-lg bg-card p-4 shadow-raised">
      <Skeleton className="aspect-[8/3] w-full rounded-md" />
      <Skeleton className="h-4 w-1/2" />
      <Skeleton className="h-3 w-4/5" />
      <div className="flex gap-2 pt-1">
        <Skeleton className="h-6 w-20 rounded-md" />
        <Skeleton className="h-6 w-16 rounded-md" />
      </div>
    </div>
  );
}

Table rows

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

export default function SkeletonTable() {
  return (
    <div className="flex w-full flex-col">
      {[0, 1, 2, 3].map((i) => (
        <div
          key={i}
          className="flex h-12 items-center gap-4 border-b border-border-muted last:border-b-0"
        >
          <Skeleton className="h-3.5 w-20" />
          <Skeleton className="h-3.5 flex-1" />
          <Skeleton className="h-3.5 w-16" />
          <Skeleton className="h-3.5 w-14" />
        </div>
      ))}
    </div>
  );
}

Props

Part	Extends
Skeleton	<div>