Skip to main content
Upgrade to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use Polaris web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the upgrade guide to upgrade your extension and avoid being blocked from updating your extension after October 1st 2026.

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?