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.
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.