---
title: HeadingGroup
description: 'This groups headings together, much like the hgroup element in HTML.'
api_version: 2024-10
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2024-10/ui-components/typography-and-content/headinggroup
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2024-10/ui-components/typography-and-content/headinggroup.md
---

# Heading​Group

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

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/admin-extensions/2023-10/headinggroup-default-t7u4fxrg.png)

### Examples

* #### Simple HeadingGroup example

  ##### React

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

  ```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);
    });
  ```

## Related

[- Heading](https://shopify.dev/docs/api/admin-extensions/components/titles-and-text/heading)