Components

Every Tamagui component takes style props. This page covers the base elements those props go on, and which one to use when.

View and Text

View and Text are the two primitives everything else is built on. They match React Native’s View and Text and add the Tamagui style props on top:

import { View, Text } from 'tamagui'

export const Hello = () => (
  <View padding="4" gap="2">
    <Text fontSize="6">Hello</Text>
    <Text color="color-11">The same layout on iOS, Android, and web.</Text>
  </View>
)
Copy

Use them by default. A View is a flex column on every platform, so a layout you build once looks the same on web and native. On web they render a div and a span, and you can change the tag with render when you need semantic HTML, such as <View render="nav">.

See View & Text for the full prop reference, including event handlers and the non-style props Tamagui adds.

Reusable components with styled()

styled() wraps any of the above into a named component with default styles and typed variants. Inline props and styled() are both optimized by the compiler, so pick whichever reads better:

import { styled, View } from 'tamagui'

export const Card = styled(View, {
  padding: '4',
  borderRadius: 'lg',
  backgroundColor: 'background',

  variants: {
    elevated: {
      true: { boxShadow: '0 4px 12px shadow-3' },
    },
  } as const,
})

// <Card elevated />
Copy

See styled() and Variants.

Themes in the tree

Theme switches the theme for a subtree, and any component takes a theme prop for the same thing at one level:

import { Button, Theme } from 'tamagui'

export const Panel = () => (
  <Theme name="dark">
    <Button>Dark</Button>
    <Button theme="blue">Dark blue</Button>
  </Theme>
)
Copy

See Theme for ThemeUpdate, custom variables, and how sub-themes resolve.

The UI kit

The tamagui package adds styled, accessible components on top of these primitives: Button, Dialog, Sheet, Select, and the rest of the UI kit. Every one of them accepts unstyled to drop its default styles and keep only its behavior.

HTML elements

The html export has an element for each semantic HTML tag, such as html.article, html.h1, and html.p. On web each one renders that tag, and on native it renders the matching React Native primitive. It follows web and React Strict DOM semantics, which makes it a good fit for screens that are mostly web content, like docs, marketing pages, and articles.

import { html } from 'tamagui'

export const Article = () => (
  <html.article maxWidth={720} margin="auto" padding="4 md:8">
    <html.h1 fontSize="8">A semantic heading</html.h1>
    <html.p color="color-11" marginTop="4">
      Renders an article, h1, and p on web.
    </html.p>
  </html.article>
)
Copy

html.* is in early development. Its elements keep the browser’s default display, so html.div is display: block on web, while React Native only supports flex layout. A layout built from html.* can therefore look different on native. Use View and Text when the same screen has to look the same everywhere. See HTML elements for the element list and native rules.

Prefer utility classes?

The same elements exist in @tamagui/tailwind, styled with className instead of props. See Tailwind.