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

```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', () => );
function App() {
return (
Hi John Doe! (h1)
Your account (h2)
Change Password (h3)
);
}
```