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

* **lines**

  **number**

  **Default: 1**

  Number of lines to display when no children are passed.

* **size**

  **TextSize**

  Size of the text the skeleton replaces.

* **id**

  **string**

  A unique identifier for the component.

### TextSize

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

### Size

```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/2023-04/skeletontextblock-default-DcuI5fkT.png)

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