Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

SkeletonTextBlock

SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page.

Optionally you can use any text content inside a SkeletonTextBlock component as a base for the rendered skeleton

Support
Targets (50)

Supported targets

Anchor to SkeletonTextBlockPropsSkeletonTextBlockProps

Anchor to id
id
string

A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.

Anchor to lines
lines
number
Default: 1

The number of text lines the skeleton renders when no children are provided. Use this to match the expected paragraph length of the content being loaded.

Anchor to size
size

A keyword that sets the size of the skeleton to match the text it replaces. The size maps to the design system's type scale, ensuring the placeholder accurately represents the final content dimensions.

Anchor to ExamplesExamples

Anchor to Basic SkeletonTextBlockBasic SkeletonTextBlock

Basic SkeletonTextBlock

Example

Basic SkeletonTextBlock

import {
reactExtension,
SkeletonTextBlock,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return <SkeletonTextBlock />;
}
import {extension, SkeletonTextBlock} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
const skeletonTextBlock = root.createComponent(SkeletonTextBlock);

root.appendChild(skeletonTextBlock);
});
Was this page helpful?