Skeleton

A muted placeholder that pulses where content is loading, on the 8 px row radius.

Installation

$ pnpm dlx shadcn@latest add @videorc/skeleton

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

<Skeleton className="h-4 w-44" />

Token or attribute	Meaning
`bg-muted`	The placeholder fill
`rounded-row`	The 8 px row radius; pass `rounded-full` for a round picture
`animate-pulse`	The pulse, which reduced motion stops

A skeleton is decoration. Announce the loading once, on the region it fills (aria-busy), or with a Spinner.

Spinner

The one spinner for work in flight, on the icon set's SpinnerIcon. It announces itself as a status unless it sits beside its own words.

Avatar

A round picture of a chat author or a channel, with initials while the picture loads or when it fails, in three sizes.