Installation

Get Tamagui set up, step by step

Tamagui installs with no bundler configuration on web or native. Start small, and add the compiler and bundler plugins once the basics work.

The fastest start is a starter template:

yarnnpmbunpnpm
yarn create tamagui@latest

Requirements

React 19+
TypeScript 5+
React Native 0.81+ with the New Architecture enabled, for native apps. Tamagui uses newer style features such as boxShadow and filter. On web there are no version restrictions.

Install

Install the full UI kit:

yarnnpmbunpnpm
yarn add tamagui @tamagui/config

Or install only the style library. The tamagui package is a superset of @tamagui/core, so anywhere the docs reference core you can use either:

yarnnpmbunpnpm
yarn add @tamagui/core @tamagui/config

Choose a styling frontend

Tamagui has two ways to write styles. Both produce the same output, and the choice is per import path, so you can mix them later. Pick one to start.

Style props

Tailwind

Typed style props on View, Text, and every other Tamagui component. This is the default for new apps. It reads like React Native and needs no extra package.

App.tsx
import { TamaguiProvider, View, createTamagui } from 'tamagui'
import { defaultConfig } from '@tamagui/config/v6'

const config = createTamagui(defaultConfig)

declare module 'tamagui' {
  interface TamaguiCustomConfig extends typeof config {}
}

export default () => (
  <TamaguiProvider config={config} defaultTheme="light">
    <View width={200} height={200} backgroundColor="background" />
  </TamaguiProvider>
)

Continue with Components and Styling.

You usually export the config from a tamagui.config.ts file. See Configuration for what goes in it.

Set your root theme with the defaultTheme prop on TamaguiProvider rather than wrapping the app in <Theme>. That keeps the fastSchemeChange setting working on native and lets light and dark switch through media queries during SSR on web.

That is the whole setup:

import { Button } from 'tamagui'

export default function Demo() {
  return <Button theme="blue">Hello world</Button>
}

Every feature works at runtime, so nothing above depends on a bundler plugin. When you are ready for production, set up the compiler for smaller bundles and faster renders.