---
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: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/feedback/skeletontextblock
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/feedback/skeletontextblock.md
---

# 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

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

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

### Examples

* #### Basic SkeletonTextBlock

  ##### React

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

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

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

  ##### JS

  ```js
  import {extension, SkeletonTextBlock} from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const skeletonTextBlock = root.createComponent(SkeletonTextBlock);

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

## Preview

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