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.
Skeleton
The skeleton text block component displays a placeholder representation of a block of text while it loads. Use skeleton text block to reserve space for paragraph-level content during loading states.
Optionally pass text content inside the component to use as a base for the rendered skeleton shape.
Supported targets
- Customer
Account::Kitchen Sink - customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- Customer
Account::Kitchen Sink - customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to PropertiesProperties
Configure the following properties on the SkeletonTextBlock component.
- Anchor to idididstringstring
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 lineslineslinesnumbernumberDefault: 1Default: 1
Number of lines to display when no children are passed.
- Anchor to sizesizesizeTextSizeTextSize
Size of the text the skeleton replaces.
TextSize
A keyword that maps to a predefined text size from the design system. Includes all standard `Size` values plus `medium`, which sits between `base` and `large`.
Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'Size
A keyword that maps to a predefined size from the design system's size scale. Components use a subset of these values depending on which sizes they support. - `extraSmall`: The smallest available size. - `small`: A compact size, smaller than the default. - `base`: The default size, appropriate for most contexts. - `large`: A larger size for increased visual prominence. - `extraLarge`: The largest available keyword size. - `fill`: Stretches to fill the available space in the container.
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'Anchor to ExamplesExamples
Anchor to Display a paragraph placeholderDisplay a paragraph placeholder
Reserve space for block-level text while content loads. This example renders a skeleton text block as a paragraph placeholder.Display a paragraph placeholder
Display a paragraph placeholder
React
import {
reactExtension,
SkeletonTextBlock,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => <Extension />,
);
function Extension() {
return <SkeletonTextBlock />;
}JS
import {extension, SkeletonTextBlock} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const skeletonTextBlock = root.createComponent(SkeletonTextBlock);
root.appendChild(skeletonTextBlock);
});Anchor to Best practicesBest practices
- Match expected content length: Provide representative text content to create an accurate skeleton.
- Use for block content: For inline text placeholders, use SkeletonText instead.
Anchor to LimitationsLimitations
- Represents block-level text only. For inline text placeholders, use SkeletonText.