# Source: https://tamagui.dev/ui/headings.md

---
title: Headings
description: Heading components that mimic HTML equivalents
name: html
component: Headings
package: text
demoName: Headings
---

<HeroContainer>
  <HeadingsDemo />
</HeroContainer>

```tsx hero template=Headings

```

<Highlights
  features={[
    'Accepts size prop that works on all styles.',
    'Define custom fonts with styles per-size.',
  ]}
/>

## Installation

Headings is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/text
```

```tsx
import { H1, H2, H3, H4, H5, H6, Heading } from 'tamagui'

export default () => (
  <>
    <H1>Heading 1</H1>
    <H2>Heading 2</H2>
    <H3>Heading 3</H3>
    <H4>Heading 4</H4>
    <H5>Heading 5</H5>
    <H6>Heading 6</H6>
    <Heading>Heading</Heading>
  </>
)
```

The headings all extend from the base `Heading` component. Note, this is just our own theme for Inter headings, but you can change the styles for any font completely.

Tamagui expects for your [font.size](/docs/core/configuration#font-tokens) to have the keys 1-10 so headings work with your font tokens automatically.

## How it works

The `Heading` component is defined as follows:

```tsx
export const Heading = styled(Paragraph, {
  tag: 'span',
  name: 'Heading',
  accessibilityRole: 'header',
  fontFamily: '$heading',
  size: '$8',
  margin: 0,
})
```

Note that Heading, and H1-H6 all default to the `heading` font family that must be defined in your tamagui.config.ts.

Because [Paragraph](/docs/components/text#paragraph) extends [SizableText](/docs/components/text#sizabletext), you get automatic styles based on your font theme. Let's see how `SizableText` defines the size variant, roughly, which gives a good idea of how Tamagui works, and how you could create or change your own headings at a lower level.

```tsx
import { Text } from 'tamagui' // or '@tamagui/core'

const SizableText = styled(Text, {
  name: 'SizableText',
  fontFamily: '$body',
  color: '$color',

  variants: {
    size: {
      '...fontSize': (val, { font, props }) => {
        const fontSize = font.size[val]
        const lineHeight = font.lineHeight[val]
        const fontWeight = font.weight[val]
        const letterSpacing = font.letterSpacing[val]
        const fontStyle = font.style?.[val]
        const textTransform = font.transform?.[val]
        return {
          fontStyle,
          textTransform,
          fontWeight,
          letterSpacing,
          fontSize,
          lineHeight,
        }
      },
    },
  },

  defaultVariants: {
    // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale
    size: '$true',
  },
})
```

## API Reference

### Heading

Headings extend [SizableText props](/docs/components/text#sizabletext) inheriting all the [Tamagui standard props](/docs/intro/props).