---
title: SkeletonText
description: >-
  SkeletonText is used to provide a low fidelity representation of text content
  before it appears on the page. 


  Optionally you can use any text content inside `SkeletonText` to be used as a
  base for the rendered skeleton
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.

# Skeleton​Text

SkeletonText is used to provide a low fidelity representation of text content before it appears on the page.

Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton

### Support Targets (25)

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

## SkeletonTextProps

* **id**

  **string**

  A unique identifier for the component.

* **inlineSize**

  **Extract\<Size, 'small' | 'base' | 'large'>**

  Adjust the length of the text when no children are passed.

* **size**

  **TextSize**

  Size of the text the skeleton replaces.

### 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'
```

### TextSize

```ts
Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/skeletontext-default-CMiVk2bP.png)

### Examples

* #### Basic SkeletonText

  ##### 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);
  });
  ```

* #### Using skeleton loaders to prevent layout shifts on content load.

  ##### Description

  When adding content to a layout, incorporate a skeleton loader that renders the approximate size and position of the content during loading. This will provide a seamless transition from skeleton loaders to the content, and prevent any layout shift when the resulting content loads.

  ##### React

  ```jsx
  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);
    },
  );
  ```