Skeleton

A pulsing placeholder block for loading states — just a styled <div>, sized via className.

import { Skeleton } from "@pompeitech/vesuvius-ui";

Default

A card skeleton

API

Skeleton

Every native <div> prop — shape and size come entirely from className (a circle avatar placeholder is size-12 rounded-full, a text line is h-4 w-40, and so on). No variant/shape prop, by design, since the shapes needed are unbounded.

Accessibility

Purely visual — it has no ARIA role of its own. Wrap the region that's loading in aria-busy="true" on its container (and remove it once real content replaces the skeletons) if you want assistive tech to know a loading state is in progress, rather than silently seeing empty placeholder blocks.