Headings

Heading components that mirror HTML equivalents

Heading components map semantic HTML headings to your configured font sizes on web and native.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Features

One size prop for all styles
Custom fonts with per-size styles

Installation

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

yarnnpmbunpnpm
yarn add @tamagui/text

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. This is our own theme for Inter headings; you can restyle them for any font.

Tamagui expects your font.size tokens to include the keys 1-10 so headings resolve automatically.

How it works

The Heading component is defined as follows:

export const Heading = styled(Paragraph, {
  render: 'span',
  displayName: 'Heading',
  role: 'heading',
  fontFamily: 'heading',
  margin: 0,
  size: '8',
})

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

Because Paragraph extends 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.

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

const SizableText = styled(Text, {
  displayName: '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: {
    size: true,
  },
})

API reference

Heading

Headings extend SizableText props inheriting all the Tamagui standard props.

Surface

Text

Edit this page on GitHub.