Skeleton

Loading placeholder that mirrors the shape of incoming content.

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/skeleton.json

Shape it with utility classes to match the content it stands in for.

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

<Skeleton className="h-4 w-48" />
<Skeleton className="size-10 rounded-full" />

Marked aria-hidden; announce loading at the container level (e.g. aria-busy on the region) rather than per placeholder block.

Progress

Linear progress bar and circular progress ring.

Spinner

Loading spinner in four sizes.