---
title: SkeletonTextBlock
description: >-
  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
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/skeletontextblock
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontextblock.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​Block

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

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

## SkeletonTextBlockProps

* **id**

  **string**

  A unique identifier for the component.

* **lines**

  **number**

  **Default: 1**

  Number of lines to display when no children are passed.

* **size**

  **TextSize**

  Size of the text the skeleton replaces.

### TextSize

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

## Preview

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

### Examples

* #### Basic SkeletonTextBlock

  ##### React

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

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

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

  ##### JS

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