---
title: SkeletonText
description: >-
  SkeletonText is used to provide a low fidelity representation of text content
  before it appears on the page. Use SkeletonText as a placeholder while content
  loads to prevent layout shifts and improve perceived performance.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontext
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontext.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# SkeletonText

The skeleton text component displays a placeholder representation of inline text content while it loads. Use skeleton text to improve perceived performance by reserving space where text will appear.

Optionally pass text content inside the component to use as a base for the rendered skeleton shape.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Loading labels**: Show placeholder text while label content loads.
* **Placeholder prices**: Reserve space for price text during data fetching.
* **Inline content loading**: Indicate that inline text is being loaded.
* **Smooth transitions**: Prevent layout shifts when text content appears.

***

## Properties

Configure the following properties on the SkeletonText component.

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

* **inlineSize**

  **'small' | 'large' | 'base'**

  Adjusts the visual length of the skeleton placeholder when no children are provided. Use this to approximate the expected width of the content that will eventually load.

* **size**

  **TextSize**

  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.

### 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\`.

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

```ts
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
```

***

## Examples

### Display a text placeholder

Reserve space for inline text while content loads. This example renders a skeleton text component as a placeholder.

## Display a text placeholder

![A skeleton text component displaying a placeholder for inline text content](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/skeletontext-default-CMiVk2bP.png)

## Display a text placeholder

##### React

```tsx
import {
  reactExtension,
  SkeletonText,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return <SkeletonText />;
}
```

##### JS

```js
import {extension, SkeletonText} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const skeletonText = root.createComponent(SkeletonText);

  root.appendChild(skeletonText);
});
```

### Prevent layout shifts during loading

Use skeleton loaders to reserve space during loading and prevent layout shifts. This example shows how to create a smooth transition from placeholder to real content.

## Prevent layout shifts during loading

![Skeleton loaders preventing layout shifts during content loading](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/loading-skeletons-Bn8fC71t.gif)

## Prevent layout shifts during loading

##### React

```tsx
import {
  reactExtension,
  View,
  BlockStack,
  InlineLayout,
  SkeletonImage,
  Image,
  Icon,
  SkeletonText,
  Text,
} from '@shopify/ui-extensions-react/checkout';

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

export const ProductThumbnail = ({
  source = 'https://yourawesomeimage.com',
}) => (
  <View
    minBlockSize={64}
    cornerRadius="large"
    maxInlineSize={64}
    minInlineSize={64}
    border="base"
  >
    {source ? (
      <Image
        fit="cover"
        aspectRatio={1}
        source={source}
        cornerRadius="large"
      />
    ) : (
      <View maxInlineSize={33}>
        <Icon source="camera" size="fill" />
      </View>
    )}
  </View>
);
export const LoadingStateSkeletons = () => {
  const loading = true;
  const [item1, item2] = [
    {
      title: 'Felipe Toledo WildFire',
      variantTitle: 'Medium',
      price: '$330.00',
    },
    {
      title: 'Roller',
      variantTitle: 'Medium',
      price: '$248.00',
    },
  ];
  const itemInfo = ({title, variantTitle}) =>
    loading ? (
      <>
        <SkeletonText>{title}</SkeletonText>
        <SkeletonText>
          {variantTitle}
        </SkeletonText>
      </>
    ) : (
      <>
        <Text emphasis="bold">{title}</Text>
        <Text appearance="subdued">
          {variantTitle}
        </Text>
      </>
    );
  const order = (item) => (
    <InlineLayout
      columns={['auto', 'fill', 'auto']}
      spacing="base"
      blockAlignment="center"
    >
      {loading ? (
        <SkeletonImage
          blockSize={64}
          inlineSize={64}
        />
      ) : (
        <ProductThumbnail />
      )}
      <BlockStack spacing="extraTight">
        {itemInfo(item)}
      </BlockStack>
      {loading ? (
        <SkeletonText>{item.price}</SkeletonText>
      ) : (
        <Text emphasis="bold">{item.price}</Text>
      )}
    </InlineLayout>
  );
  return (
    <View maxInlineSize={400}>
      <BlockStack>
        {order(item1)}
        {order(item2)}
      </BlockStack>
    </View>
  );
};
```

##### JavaScript

```js
import {
  extension,
  BlockStack,
  View,
  InlineLayout,
  Image,
  Icon,
  Text,
  SkeletonImage,
  SkeletonText,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root) => {
    const source = 'https://yourawesomeimage.com';
    const loading = true;
    const [item1, item2] = [
      {
        title: 'Felipe Toledo WildFire',
        variantTitle: 'Medium',
        price: '$330.00',
      },
      {
        title: 'Roller',
        variantTitle: 'Medium',
        price: '$248.00',
      },
    ];
    const thumbnail = root.createComponent(
      View,
      {
        minBlockSize: 64,
        cornerRadius: 'large',
        maxInlineSize: 64,
        minInlineSize: 64,
        border: 'base',
      },
      [
        source
          ? root.createComponent(Image, {
              fit: 'cover',
              aspectRatio: 1,
              source,
              cornerRadius: 'large',
            })
          : root.createComponent(
              View,
              {maxInlineSize: 33},
              [
                root.createComponent(Icon, {
                  source: 'camera',
                  size: 'fill',
                }),
              ],
            ),
      ],
    );
    const itemInfo = ({title, variantTitle}) =>
      root.createComponent(
        BlockStack,
        {
          spacing: 'extraTight',
        },
        [
          loading
            ? (root.createComponent(
                SkeletonText,
                {},
                title,
              ),
              root.createComponent(
                SkeletonText,
                {},
                variantTitle,
              ))
            : (root.createComponent(
                Text,
                {},
                title,
              ),
              root.createComponent(
                Text,
                {},
                variantTitle,
              )),
        ],
      );
    const order = (item) =>
      root.createComponent(
        InlineLayout,
        {
          columns: ['auto', 'fill', 'auto'],
          spacing: 'base',
          blockAlignment: 'center',
        },
        [
          loading
            ? root.createComponent(
                SkeletonImage,
                {
                  blockSize: 64,
                  inlineSize: 64,
                },
              )
            : thumbnail,
          itemInfo(item),
          loading
            ? root.createComponent(
                SkeletonText,
                {},
                item.price,
              )
            : root.createComponent(
                Text,
                {},
                item.price,
              ),
        ],
      );
    const view = root.createComponent(
      View,
      {
        maxInlineSize: 400,
      },
      [
        root.createComponent(BlockStack, {}, [
          order(item1),
          order(item2),
        ]),
      ],
    );
    root.appendChild(view);
  },
);
```

***

## Best practices

* **Match expected content size**: Use `inlineSize` to approximate the width of the final text.
* **Provide base content when possible**: Pass text content inside the component to create a more accurate skeleton shape.

***

## Limitations

* Only represents inline text. For block-level content placeholders, use [SkeletonTextBlock](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontextblock).

***