---
title: HeadingGroup
description: >-
  Heading group controls the heading level of headings nested within it, like
  H1, H2, H3.


  Use a heading group whenever you use a heading to ensure the experience is the
  same for screen reader users. When using a heading, any children related to
  that heading should be nested within the same heading group.
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/headinggroup
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/headinggroup.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.

# Heading​Group

Heading group controls the heading level of headings nested within it, like H1, H2, H3.

Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group.

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

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/api/checkout-extensions/post-purchase/components/headinggroup-BAA52Ci5.png)

### Examples

* #### Basic HeadingGroup

  ##### React

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

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

  function Extension() {
    return (
      <>
        <Heading>Heading <h1></Heading>

        <HeadingGroup>
          <Heading>Heading <h2></Heading>

          <HeadingGroup>
            <Heading>Heading <h3></Heading>
          </HeadingGroup>
        </HeadingGroup>
      </>
    );
  }
  ```

  ##### JS

  ```js
  import {
    extension,
    HeadingGroup,
    Heading,
    View,
  } from '@shopify/ui-extensions/customer-account';

  export default extension('customer-account.page.render', (root) => {
    const headingGroup = root.createComponent(View, undefined, [
      root.createComponent(Heading, undefined, 'Heading <h1>'),
      root.createComponent(HeadingGroup, undefined, [
        root.createComponent(Heading, undefined, 'Heading <h2>'),
        root.createComponent(HeadingGroup, undefined, [
          root.createComponent(Heading, undefined, 'Heading <h3>'),
        ]),
      ]),
    ]);

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

## Best Practices

* Use this component to create a content hierarchy within the document outline.

## Related

[Component - Heading](heading)

[Component - Text](text)

[Component - TextBlock](textblock)