Skeleton

A placeholder shaped like content that is still loading.

Code

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

<div role="status" className="text-sm text-muted-foreground">Loading orders…</div>
<Skeleton className="h-4 w-56" />

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h('div', { className: 'pui-inline', style: { gap: 16 } },
    h(P.Skeleton, { style: { width: 40, height: 40, borderRadius: 9999 } }),
    h('div', { style: { display: 'grid', gap: 8 } }, h(P.Skeleton, { style: { width: 220, height: 16 } }), h(P.Skeleton, { style: { width: 160, height: 16 } }))));

Usage

What you provide

Size through classes (h-4 w-[220px], size-10 rounded-full) that mirror the final layout.
Use it for loads longer than ~300ms. The animation stops under prefers-reduced-motion.

Accessibility

A skeleton is decorative: PUI hides it from screen readers (aria-hidden) and stops the pulse when the person prefers reduced motion.
Always pair it with text in a role="status" region that names what is loading ("Loading orders…"), and set aria-busy on the region being updated, back to false when done.
A skeleton never replaces the outcome: end every wait with the content, an error with "Try again", or an empty state.
Don't draw fake buttons or links in a skeleton, and don't move focus while it updates.

Adapted from Magoo 1.6.0 by Marcelo Sales: Loading and progress (carregamento-progresso). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add skeleton

<div role="status">Loading…</div>
<Skeleton />

Skeleton

Name	Type
`className`	`string`
Size and shape, e.g. "h-4 w-40" or "size-10 rounded-full".