--- title: TextBlock description: >- Text block is used to render a block of text that occupies the full width available, like a paragraph. Use TextBlock for body copy, descriptions, or any content that should span the full width as a paragraph. 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/textblock md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/textblock.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. # TextBlock The text block component renders a block of text that occupies the full width available, similar to a paragraph. Use text block for multi-line content like descriptions, policies, or explanatory copy. For inline text styling within a sentence, use [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/text). ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/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/2025-07/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Product descriptions**: Display detailed product or service information. * **Policy text**: Present return policies, terms, or legal content. * **Explanatory copy**: Provide context or instructions for customers. * **Account information**: Show account details or profile descriptions. *** ## Properties Configure the following properties on the TextBlock component. * **appearance** **'subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical'** Changes the visual appearance of the text block, letting you convey meaning through color. * `accent`: Conveys emphasis and draws attention to the element. * `subdued`: Conveys a subdued or disabled state. * `info`: Conveys informational content. * `success`: Conveys a successful interaction. * `warning`: Conveys something needs attention or action. * `critical`: Conveys a problem has arisen. * `decorative`: Uses the `decorative` color set within the theme. * **emphasis** **Emphasis** Use to emphasize a word or a group of words within the text block. Set to `bold` or `italic` to apply typographic emphasis that communicates visual hierarchy or stress. * `italic`: Sets the text block in italic. Combine with an `accessibilityRole` of `offset` or `stress` to add more meaning to the text. * `bold`: Sets the text block in bold. Combine with an `accessibilityRole` of `strong` to add more meaning to the text. * **id** **string** A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component. * **inlineAlignment** **InlineAlignment** Aligns the text along the inline axis. Use this to control the horizontal text alignment within the text block. * **size** **TextSize** A keyword that sets the size of the text block. Sizes map to the design system's type scale. * `extraSmall`: The smallest text size. * `small`: A smaller text size for secondary content. * `base`: The default text size for body content. * `medium`: A slightly larger text size. * `large`: A larger text size for emphasis. * `extraLarge`: The largest text size. ### Emphasis A keyword that controls typographic emphasis on a text component. Use emphasis to draw attention to a word or group of words within a passage. ```ts 'italic' | 'bold' ``` ### InlineAlignment Controls how content is aligned along the inline axis (horizontal in standard writing modes). - \`'start'\`: Aligns content to the inline start of the container. - \`'center'\`: Centers content along the inline axis. - \`'end'\`: Aligns content to the inline end of the container. ```ts 'start' | 'center' | 'end' ``` ### TextSize A keyword that maps to a predefined text size from the design system. Includes all standard \`Size\` values plus \`medium\`, which sits between \`base\` and \`large\`. ```ts Extract | '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 ### Display a block of text Render a full-width block of text content. This example displays a text block component as a paragraph. ## Display a block of text ![A text block component rendering a paragraph of text](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/textblock-default-Z7kG9xwo.png) ## Display a block of text ##### React ```tsx import { reactExtension, TextBlock, BlockStack, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( We have a 30-day return policy, which means you have 30 days after receiving your item to request a return. To be eligible for a return, your item must be in the same condition that you received it, unworn or unused, with tags, and in its original packaging. You’ll also need the receipt or proof of purchase. ); } ``` ##### JS ```js import { extension, TextBlock, BlockStack, } from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const textBlock = root.createComponent(BlockStack, undefined, [ root.createComponent( TextBlock, undefined, 'We have a 30-day return policy, which means you have 30 days after receiving your item to request a return.', ), root.createComponent( TextBlock, undefined, 'To be eligible for a return, your item must be in the same condition that you received it, unworn or unused, with tags, and in its original packaging. You’ll also need the receipt or proof of purchase.', ), ]); root.appendChild(textBlock); }); ``` *** ## Best practices * **Keep paragraphs focused**: Limit each text block to a single idea for scannability. * **Use appropriate size**: Match the text size to the content hierarchy. * **Use Text for inline styling**: For emphasizing words within a text block, nest Text components inside. ***