Skeleton

A placeholder in the shape of content still loading, pulsing gently.

import { Skeleton } from '@zitdevs/ui';

Examples

A project row while it loads:

Loading projects

<div aria-busy="true" className="flex items-start gap-4">
  <span className="sr-only">Loading projects</span>
  <Skeleton shape="circle" className="size-14" />
  <div className="flex flex-1 flex-col gap-2.5">
    <Skeleton className="w-3/5" />
    <Skeleton className="w-2/5" />
    <Skeleton shape="block" className="mt-1.5 h-16" />
  </div>
</div>

Props

Prop	Type	Default	Notes
shape	'line' | 'circle' | 'block'	'line'	A line of text (14px tall), an avatar (40px), an image or a card (96px).
ref	Ref<HTMLSpanElement>	—	The <span>.
className	string	—	Its size and placement: h-6 w-1/2 replaces the shape’s own.
anything else	<span> attributes	—	Except aria-hidden, which is always set.

Exported types: SkeletonProps, SkeletonShape.

Accessibility

• Every skeleton is aria-hidden: a row of grey bars says nothing to a screen reader.
• The loading region carries the meaning. Give the element the skeletons stand in for aria-busy="true" while it loads, and say what is loading in words (sr-only text, or a status message), then drop aria-busy when the content arrives.
• The pulse holds still for a reader who asks for reduced motion.

Without JavaScript

It is markup; it needs none. Render it where content will arrive, on the server for a streamed response or from the client while a request runs.

Theming

surface-active (the placeholder).