# Skeleton morph

Loading skeletons that grow into the real content, block by block, instead of swapping.

- ID: `skeleton-morph`
- Import: `animui/skeleton-morph`
- Category: Special
- Runtime exports: `SkeletonMorph`, `MorphBlock`
- Declaration: `types/pro/skeleton-morph.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: skeleton, morph-loader, empty-state

```tsx
import { SkeletonMorph } from 'animui/skeleton-morph';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info skeleton-morph` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export type ElementType = string | ComponentType<Record<string, never>>;
export interface SkeletonMorphProps {
  loading: boolean;
  children: ReactNode;
  stagger?: number;
  loadingLabel?: string;
  as?: ElementType;
  className?: string;
  style?: CSSProperties;
}

export interface MorphBlockProps {
  children?: ReactNode;
  width?: number | string;
  height?: number | string;
  radius?: number | string | "circle";
  lines?: number;
  lineHeight?: number;
  as?: "div" | "span" | "p" | "li" | "section" | "article" | "header" | "footer" | "h2" | "h3" | "h4";
  className?: string;
  style?: CSSProperties;
}

export declare const SkeletonMorph: ComponentType<SkeletonMorphProps>;
export declare const MorphBlock: ComponentType<MorphBlockProps>;

export default SkeletonMorph;
```