Skeleton

Usage

import { Skeleton } from '@acronis-platform/shadcn-uikit';

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

Overview

The Skeleton component renders an animated placeholder that pulses to indicate loading state. Shape it with className to match the layout of the content it replaces -- use rounded-full for avatars, fixed widths for text lines, etc.

API Reference

The Skeleton extends all native <div> HTML attributes (React.HTMLAttributes<HTMLDivElement>). It applies animate-pulse rounded-md bg-muted by default.