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

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 SkeletonTextBlock to be used as a base for the rendered skeleton

Anchor to id
id
string

A unique identifier for the component.

Anchor to lines
lines
number
Default: 1

Number of lines to display when no children are passed.

Anchor to size
size

Size of the text the skeleton replaces.

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?