---
title: Skeleton paragraph
description: >-
  Displays a placeholder representation of text content while it loads. Use to
  improve perceived performance by showing users where text will appear.
api_version: 2026-04
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/skeleton-paragraph
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/typography-and-content/skeleton-paragraph.md
---

# Skeleton paragraph

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

Skeleton paragraphs help prevent layout shifts and give customers a visual indication that content is loading.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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/2026-04/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/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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/2026-04/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/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/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/2026-04/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/2026-04/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/2026-04/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Loading states**: Reserve space for text content that's being fetched from an API.
* **Deferred content**: Placeholder multi-line blocks while personalized recommendations load.
* **Progressive rendering**: Preview the expected layout height before dynamic content appears.

***

## Properties

Configure the following properties on the skeleton paragraph component.

* **content**

  **string**

  **Default: ''**

  The content to be used as a base for the skeleton. This content will be hidden when the skeleton is visible.

  This can be useful when the skeleton is representing a known piece of content which is part of a larger element that has not yet fully loaded.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

***

## Examples

### Reserve space for loading content

Reserve space for loading content with a placeholder animation. This example renders a default `s-skeleton-paragraph` as a loading state stand-in.

## Reserve space for loading content

![Animated placeholder lines mimicking paragraph text while content loads.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/skeleton-paragraph-default-TQd9tr25.png)

## html

```html
<s-skeleton-paragraph></s-skeleton-paragraph>
```

### Size a skeleton to match final copy length

Match placeholder height to the approximate length of the real text. This example sets the `content` prop with hidden placeholder text that drives the skeleton block size.

## html

```html
<s-skeleton-paragraph content="Your order will arrive in 3-5 business days."></s-skeleton-paragraph>
```

### Reserve space for multi-line content

Preview how tall a multi-line block will be before the data arrives. This example uses `content` with longer placeholder text so the skeleton spans multiple lines.

## html

```html
<s-skeleton-paragraph content="Your order has been confirmed and is being prepared for shipment. You'll receive a tracking number by email once your package is on its way."></s-skeleton-paragraph>
```

***

## Best practices

* **Match the final layout**: Set `content` so the skeleton approximates the height of the real text, preventing layout shift on load.
* **Use sparingly**: Only add skeleton paragraphs where content genuinely loads asynchronously. Don't use them for static text.
* **Pair with loading logic**: Replace the skeleton with actual content as soon as the data is available. Avoid lingering placeholders.

***