Headings

Heading components that mimic HTML equivalents.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Features

  • Accepts size prop that works on all styles.

  • Define custom fonts with styles per-size.

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

Tamagui expects for your font.size to have the keys 1-10 so headings work with your font tokens automatically.

How it works

The Heading component is defined as follows:

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

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/core'
const SizableText = styled(Text, {
name: 'SizableText',
fontFamily: '$body',
color: '$color',
variants: {
size: {
'...fontSize': (val, { tokens, props }) => {
const family = getVariableValue(props.fontFamily) || '$body'
const font = tokens.font[family] || tokens.font['$body']
const fontFamily = font.family
const fontSize = props.fontSize || font.size[val]
const lineHeight = props.lineHeight || font.lineHeight[val]
const fontWeight = props.fontWeight || font.weight[val]
const letterSpacing = props.letterSpacing || font.letterSpacing[val]
const fontStyle = props.fontStyle || font.style?.[val]
const textTransform = props.textTransform || font.transform?.[val]
return {
fontStyle,
textTransform,
fontFamily,
fontWeight,
letterSpacing,
fontSize,
lineHeight,
}
},
},
},
defaultVariants: {
size: '$4',
},
})

Heading props

Headings extend SizableText props inheriting all the Tamagui standard props.