Skeleton

Usage

import { Skeleton } from '@acronis-platform/ui-react';

Skeleton is a pulsing placeholder that reserves layout space while content loads, reducing layout shift. Its shape and size come from the className you pass; the fill uses a subtle gray surface token.

Design-pending v1, ported from the legacy shadcn-uikit skeleton.

Examples

<div className="flex items-center gap-4">
  <Skeleton className="size-12 rounded-full" />
  <div className="flex flex-col gap-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

For indeterminate work with no known shape use Spinner; for determinate progress use Progress.

API Reference

Skeleton accepts all native <div> attributes; set width / height / radius via className.