Skeleton

Use Skeleton to display shimmering content placeholders while data loads. Skeleton is a container that lays out one or more SkeletonRow children, each of which renders a placeholder line, heading, or your own inline SVG shape. Both Skeleton and SkeletonRow are exported from the same package.

Import

import { Skeleton, SkeletonRow } from '@dropins/tools/components.js';

Props

Skeleton sets the gap between its rows and renders SkeletonRow children.

Prop	Type	Req?	Description
rowGap	'xsmall' | 'small' | 'medium' | 'big' | 'xbig'	No	Horizontal and vertical gap between rows. Defaults to medium.

Skeleton also accepts standard HTML attributes (for example, className, style), except size.

SkeletonRow props

Each SkeletonRow renders one placeholder. Pass an SVG string as its child to render a shimmering version of that shape instead.

Prop	Type	Req?	Description
variant	'heading' | 'row' | 'empty'	No	Type of placeholder to render. Defaults to row.
size	'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'	No	Size of the placeholder. Defaults to small.
lines	number	No	Number of times to repeat the row. Defaults to 1.
fullWidth	boolean	No	Stretch the placeholder to full width. Defaults to false.
multilineGap	'xsmall' | 'small' | 'medium' | 'big' | 'xbig'	No	Vertical gap between multiline items. Defaults to medium.
children	string	No	An SVG string rendered as a shimmering shape.

Example

Build the rows with h and pass them as children.

import { Skeleton, SkeletonRow, provider } from '@dropins/tools/components.js';
import { h } from '@dropins/tools/preact.js';

await provider.render(Skeleton, {
  rowGap: 'medium',
  children: [
    h(SkeletonRow, { variant: 'heading', size: 'medium' }),
    h(SkeletonRow, { size: 'medium', fullWidth: true, lines: 3 }),
  ],
})(document.querySelector('.skeleton'));

Related

• Product Item Card — renders a skeleton until it is initialized.
• Design tokens — the spacing scale the row gaps use.