Installation

Setting up Tamagui can be easy, or take a bit of investment. We find that many people make the wrong decision, and try to customize everything right away. Instead, we recommend starting simple and then customizing it only once you've got it running.

We recommend starting by using npm create tamagui@latest to create a starter template, even if you plan to integrate Tamagui into your own repo. This way you can reference a fully working implementation.

To install it from scratch:

yarn
npm
bun
pnpm
yarn add @tamagui/core

If you plan to use the full UI kit, tamagui, you can avoid installing @tamagui/core altogether and instead:

yarn
npm
bun
pnpm
yarn add tamagui

The tamagui package is a superset of core, so anywhere in the docs @tamagui/core is used, you can replace it with tamagui.

Adding the optional TamaguiProvider is recommended as it lets you configure a variety of things:

App.tsx
import { TamaguiProvider, View } from '@tamagui/core'
import config from './tamagui.config' // your configuration

export default function App() {
  return (
  <TamaguiProvider config={config}>
    <View width={200} height={200} backgroundColor="$background" />
  </TamaguiProvider>
  )
}

See the configuration documentation docs for a comprehensive overview of what can be in your config.

If you'd like to get started more quickly with presets, we have @tamagui/config:

yarn
npm
bun
pnpm
yarn add @tamagui/core @tamagui/config

And then provide it near your root:

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

// you usually export this from a tamagui.config.ts file
const config = createTamagui(defaultConfig)

type Conf = typeof config

// make imports typed
declare module '@tamagui/core' {
  interface TamaguiCustomConfig extends Conf {}
}

export default () => {
  return (
    <TamaguiProvider config={config}>
      {/* your app here */}
    </TamaguiProvider>
  )
}

You are ready to go.

import { Button } from 'tamagui'

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

From here, we'd recommend spending some time understanding configuration. Tamagui works across 100% of it's features at runtime and compile-time. This means you can wait until you absolutely need more performance to set up the compiler.

Guides

Tamagui generally doesn't require any special bundler setup as we've worked hard to make it "just work" without configuration in a wide variety of environments.

That said, the broader React Native and React Native Web ecosystem is filled with packages that do need configuration. Tamagui provides a variety of bundler plugins that help improve that compatibility, as well as letting you opt into the optimizing compiler.

For more in-depth guides: