Skeleton

Show a placeholder outline while content loads, previewing structure and keeping layout stable.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Skeleton as a loading placeholder. When an existing component supports loading or skeleton, set that state so it can provide the correct shape rather than redrawing its skeleton in the page.

loading=false renders real children. During loading, variant, width, height, or renderHints controls the placeholder.
Prefer a component’s own loading shape. For a standalone Skeleton, use design-system Tokens for dimensions and corner radius.

Import

import { Skeleton } from '@snowui-design-system/components';

Usage

Variants

Loading state

API Reference

Property	Type	Default	Example	Description
`variant`	`SkeletonVariant`	`—`	`variant={value}`	Explicit skeleton shape. Aliases normalize to line, circle, or rect.
`width`	`string \| number`	`—`	`width="Example"`	Explicit width. Numeric values are converted to rem automatically.
`height`	`string \| number`	`—`	`height="Example"`	Explicit height. Numeric values are converted to rem automatically.
`componentClass`	`string`	`—`	`componentClass="Example"`	Compatibility entry for older callers. Matches historic default layouts only when renderHints is absent. New components must not register through it.
`renderHints`	`FrameRenderHints`	`—`	`renderHints={value}`	Component registration protocol supporting variant, width, height, radius, and rows.
`loading`	`boolean`	`true`	`loading`	Whether to show the skeleton. false falls back to rendering children.
`responsive`	`ResponsiveConfig`	`—`	`responsive={value}`	Responsive width and height overrides.
`class`	`string`	`""`	`class="my-component"`	External class name. Applied to the layout container for multiple skeleton items or the block itself for a single item.
`style`	`string`	`""`	`style="width: 100%;"`	Inline style. Applied to the layout container for multiple skeleton items or the block itself for a single item.
`children`	`Snippet`	`—`	`<Skeleton>Content</Skeleton>`	Real child content with no parameters when the skeleton is hidden. Not rendered while the component’s skeleton layout is active.