# HeadingGroup

This groups headings together, much like the hgroup element in HTML.

```tsx
import {
    render,
    HeadingGroup,
    Heading,
  } from '@shopify/ui-extensions-react/admin';

  render('Playground', () => <App />);

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

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

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

```

```js
import {
    extend,
    HeadingGroup,
    Heading,
    BlockStack,
  } from '@shopify/ui-extensions/admin';

  extend('Playground', (root) => {
    const headingGroup = root.createComponent(BlockStack, 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);
  });

```