---
title: Heading | UI
description: This is a generic component for low level layout needs. It is similar to a div in HTML.
pageTitle: Heading
pageDescription: This is a generic component for low level layout needs. It is similar to a div in HTML.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Typography/Heading" />

import { Heading } from './Heading';
import { transformedCode } from '../../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  Text,
} from '@gluestack/design-system';

import { styled } from '@dank-style/react';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Heading` component to your project.

```jsx
npx install @gluestack-ui add heading
```

## Import

```bash
// import the component from your component folder
import { Heading } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
 <Heading>I am a Heading</Heading>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Heading,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The heading component consists of the following parts:

```bash
export default () => <Heading>Heading</Heading>;
```

## API Reference

### Heading

It inherits all the properties of @expo/html-elements's [H1](https://github.com/expo/expo/tree/main/packages/html-elements) component.

<br />
<br />

<br />

# Advanced

## Customizing the Heading

For customizing the Heading, you have to map styled view to Heading. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```bash
// import the styles
import { Root } from '../components/core/heading/styled-components';

// mapping the Heading to root component
const Heading = Root;

// Using the heading component
export default () => (
  <Heading>
    <Text />
  </Heading>
);
```

Default styling of the component can be found in the `components/core/heading` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Heading/index.tsx) of the styled `Heading` component.