Tamagui Components

Tamagui Components is a complete suite of copy-paste composable components that render nicely on both React Native and React web, in both styled and unstyled forms.

Install

You can install each component separately, or all of them at once with:

yarn
npm
bun
pnpm
Copy
yarn add tamagui

React Strict DOM for React Native

Tamagui’s UI components follow the React Strict DOM model: DOM-shaped elements and props that render to real native views on native.

The root html.* export allows a single component tree to use semantic DOM elements on web and the corresponding React Native primitives on native:

• Layout elements (html.div, html.article, html.main, html.section, html.ul) render to View on native and literal semantic tags on web.
• Text elements (html.p, html.span, html.strong, html.h1–html.h6) render to Text on native and matching headings/paragraphs on web.
• Media & inputs (html.img maps to Image, html.input / html.textarea map to TextInput).

On native, DOM props are mapped to their React Native equivalents (such as href on html.a and src on html.img), and raw strings inside layout elements are automatically wrapped. Because each member is a standard Tamagui component, style props accept tokens, themes, shorthands, and flat conditional values with compiler lowering.

For more details, see the HTML primitives documentation.

Setup

The package tamagui is a superset of @tamagui/core, so if you’ve already installed core you can change all the references to tamagui.

You’ll need to add a provider to the root of your app (unlike core, where that is optional), as it will set up the root portal for components like dialogs and popovers.

import { createTamagui, TamaguiProvider, html } from 'tamagui'
import { defaultConfig } from '@tamagui/config/v6' // for quick config install this

const config = createTamagui(defaultConfig)

export default () => (
  <TamaguiProvider config={config}>
    <html.div />
  </TamaguiProvider>
)
Copy

For a full configuration guide with createTamagui, check the core configuration docs. For native setup, platform integrations, and the fast-path runtime, see the Native documentation.