HTML elements

The html export renders semantic HTML on web and the matching React Native primitives on native. It follows web and React Strict DOM semantics, and suits screens that are mostly web content.

Each member is an ordinary Tamagui component, so it takes Tamagui style props alongside the DOM props for that element.

import { html } from 'tamagui'

export function Article() {
  return (
    <html.article maxWidth={720} margin="auto" padding="4 md:8">
      <html.h1 color="color" fontSize="8">
        A semantic, styled heading
      </html.h1>
      <html.p color="color" marginTop="4" opacity={0.75}>
        The same source renders semantic tags on web and native primitives in a
        native app.
      </html.p>
    </html.article>
  )
}
Copy

You can also import html from @tamagui/core.

Before you use it

html.* is in early development. Its elements keep the browser’s default display, so on web html.div and html.p are display: block and html.span is inline. React Native only has flex layout, so the same tree can lay out differently on native. View and Text are flex columns everywhere, which is why they stay the default for cross-platform screens.

Every html.* member is built on View or Text, so both take the same style props, tokens, themes, and variants, and you can mix them in one tree.

What renders

On web, html.article, html.h1, and html.p render literal article, h1, and p elements. Tamagui applies explicit element defaults so the result does not depend on whether the page loaded a CSS reset.

On native, the same members render through one of four backing primitives:

Source element

layout elements such as div, article, main, section, and ul

Native backing

View

Source element

text elements such as span, p, strong, and h1

Native backing

Text

Source element

img

Native backing

Image

Source element

input and textarea

Native backing

TextInput

The native runtime maps supported DOM prop names to their React Native names. It also wraps literal text inside a View-backed element, because a React Native View cannot render a raw string. The compiler performs the same mapping and text wrapping ahead of time when it can lower the element.

Available elements

The root export includes:

a article aside b bdi bdo blockquote br button code del div em
fieldset footer form h1 h2 h3 h4 h5 h6 header hr i img input
ins kbd label li main mark nav ol optgroup option p pre s section
select span strong sub sup textarea u ul
Copy

Props are specific to the element. For example, html.a accepts href, html.img accepts src and alt, and html.input accepts input props. Void elements such as br, hr, img, and input reject children in TypeScript.

Because these are Tamagui components, style props use the same tokens, themes, shorthands, and flat conditional values as View and Text:

<html.button
  backgroundColor="background hover:background-hover"
  borderColor="border-color"
  borderWidth={1}
  padding="3"
  onPress={save}
>
  Save
</html.button>
Copy

Native support is explicit

A browser feature without a faithful native equivalent does not silently turn into a different control. Native builds reject html.select, html.option, and html.optgroup, because React Native has no menu-based select control. Unsupported props and events also produce a diagnostic naming the unsupported behavior.

Some elements preserve their useful native subset. html.form and html.fieldset, for example, render containers on native, while browser form submission, validation, and reset behavior remain web-only.

The compiler and runtime read the same generated compatibility tables. Running with or without compiler lowering therefore uses the same supported tag and prop contract.

Compiler behavior

The compiler treats html.* as regular lowering candidates. On web it can replace a component with its literal tag, extracted classes, and any remaining host props. On native it can replace the same component with its backing primitive and mapped props. If the compiler cannot lower an ordinary use, the root export still has a runtime implementation on both platforms.

For new code, use the root html export shown here. The standalone tamagui/dom and @tamagui/core/dom entries are deprecated implementation surfaces. Their style() handles are compile-only and throw if they reach the runtime.