wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Core

Configuration
Tokens
Stack & Text
styled
Variants
Props
Themes
Animations
Theme
useMedia
useTheme
FontLanguage
Extras

Compiler

About
Install
Benchmarks

Theme

Colors
Tokens

Tamagui

Stacks
Headings
Text

Forms

Button
Checkbox
Form
Input & TextArea
Label
Progress
RadioGroup
Select
Slider
Switch
ToggleGroup

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip
Toast

Organize

Accordion
Group
Tabs

Content

Avatar
Card
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems
Creating Custom Themes
How to Build a Button
Developing
Next.js
Expo
Vite
create-tamagui

Community

Community
Blog
GitHub
Twitter
Discord

Headings

Heading components that mimic HTML equivalents.

Features

  • Accepts size prop that works on all styles.

  • Define custom fonts with styles per-size.

Usage

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 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,
})

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, {
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 inheriting all the Tamagui standard props.

Previous

Stacks

Next

Text