Heading groups provide the document structure that accessibility technology uses
to navigate the checkout. When you use a heading, any children related to that
heading should be nested in a heading group. This ensures that any nested headings
will use a semantically-appropriate heading level.

---
### Example
![headinggroup](/assets/api/checkout-extensions/post-purchase/components/headinggroup.png)
```ts?title: "JS"

import {extend, HeadingGroup, Heading, View} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const headingGroup = root.createComponent(View, undefined, [
    root.createComponent(Heading, undefined, 'Hi John Doe! (h1)'),
    root.createComponent(HeadingGroup, undefined, [
      root.createComponent(Heading, undefined, 'Your account (h2)'),
      root.createComponent(HeadingGroup, undefined, [
        root.createComponent(Heading, undefined, 'Change Password (h3)'),
      ]),
    ]),
  ]);

  root.appendChild(headingGroup);
});


```

```tsx?title: "React"

import {
  render,
  HeadingGroup,
  Heading,
  View,
} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <View>
      <Heading>Hi John Doe! (h1)</Heading>

      <HeadingGroup>
        <Heading>Your account (h2)</Heading>

        <HeadingGroup>
          <Heading>Change Password (h3)</Heading>
        </HeadingGroup>
      </HeadingGroup>
    </View>
  );
}


```