Skeleton

Skeleton displays a lightweight placeholder while the real content is loading. It keeps the layout stable and communicates loading state without showing unfinished content.

The live examples are available in the Skeleton showcase. Use the showcase link in the component catalog to return to the implementation examples.

Basic usageCopy Anchor Link

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

<Skeleton variant="text" width="280px" />
<Skeleton variant="rectangular" width="100%" height="160px" />
<Skeleton variant="circular" width="48px" height="48px" />

VariantsCopy Anchor Link

variant controls the shape of the placeholder:

• text renders one or more text lines. Use lines and lastLineWidth for paragraph-shaped loading states.
• rectangular renders a block for images, cards, panels, and other media.
• circular renders a circle, commonly used for avatars or icon placeholders.

<Skeleton variant="text" lines={3} lastLineWidth="60%" />
<Skeleton variant="rectangular" width="320px" height="180px" radius="12px" />
<Skeleton variant="circular" width={56} height={56} />

AnimationCopy Anchor Link

animation accepts pulse, wave, or none:

<Skeleton animation="pulse" />
<Skeleton animation="wave" />
<Skeleton animation="none" />

pulse is the default. wave moves a highlight across the placeholder. Use none for static loading states or when animation should be disabled. The component also disables animation when the user has enabled prefers-reduced-motion.

Text lines and dimensionsCopy Anchor Link

lines is clamped to at least one line. With multiple lines, lastLineWidth controls the width of the final line; the default is 72%. width, height, and radius accept CSS lengths or numbers. Numeric values are interpreted as pixels.

<Skeleton variant="text" lines={4} width="100%" lastLineWidth="48%" />
<Skeleton variant="rectangular" width="100%" height={120} radius="8px" />
<Skeleton variant="circular" width={64} height={64} />

size is a convenient text-line preset: sm, default, or lg. Explicit height takes precedence over the preset.

tone accepts default, subtle, or strong and changes the base contrast while preserving the same geometry.

ConfigProvider defaultsCopy Anchor Link

Use ConfigProvider when a product needs consistent Skeleton styling across a subtree. Instance props override provider defaults.

import { ConfigProvider, Skeleton } from '@mosmox/ui';

<ConfigProvider
  components={{
    skeleton: {
      animation: 'wave',
      baseColor: '#dbeafe',
      highlightColor: '#eff6ff',
      radius: '12px',
    },
  }}
>
  <Skeleton width="100%" height="48px" />
  <Skeleton variant="circular" width="48px" height="48px" />
</ConfigProvider>

Supported components.skeleton settings are:

API ReferenceCopy Anchor Link

Skeleton renders a div, so standard HTMLAttributes<HTMLDivElement> such as id, data-*, onClick, style, and className are supported.

AccessibilityCopy Anchor Link

The component renders role="status", aria-busy="true", and an accessible aria-label. Set label to describe the content being loaded, for example label="Loading profile". When content is ready, replace the Skeleton with the actual content and remove the busy state from the loading region.