ComponentsFeedback

Skeleton

A placeholder shape while content loads.

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Skeleton } from "junco";

<Skeleton isLoaded={!!user} className="h-4 w-32">
  <p>{user?.name}</p>
</Skeleton>

Match the skeleton to the shape of the real content so nothing jumps when it loads.

isLoaded: Renders children instead of the placeholder.; boolean; Default: false
className: Size and shape it, e.g. h-4 w-32 or size-10 rounded-pill.; string

Prop	Type	Default
`isLoaded` Renders children instead of the placeholder.	`boolean`	`false`
`className` Size and shape it, e.g. h-4 w-32 or size-10 rounded-pill.	`string`	`–`

Placeholders are aria-hidden. Set aria-busy on the region that's loading so assistive tech knows.
The pulse flattens to a still block with motion off.