Installation

Get Tamagui set up, step by step

We recommend using npm create to set up one or more of the example apps via npm create tamagui@latest. It's useful even if integrating into an existing app.

Install

The base Tamagui style library @tamagui/core has only one dependency - react.

yarn @tamagui/core

If you want tamagui, you can avoid installing core and instead use tamagui everywhere as it's a superset of core:

yarn tamagui

For now recommended yarn if you are using Tamagui in a monorepo, as it's been proven on large projects where we've found issues with others.

Add TamaguiProvider at the root of your app and you are fully set up:

App.tsx// optional but recommended CSS reset:
import '@tamagui/core/reset.css'
import { TamaguiProvider, View } from '@tamagui/core' // or 'tamagui'

export default function App () => (
  <TamaguiProvider>
    <View width={200} height={200} backgroundColor="red" />
  </TamaguiProvider>
)

Tamagui doesn't require any bundler setup for either web or native, but you'll typically want to configure a few things using createTamagui like media queries, fonts, or tokens. The configuration documentation covers this in detail, but if you'd like to get started with decent defaults, you'll want @tamagui/config:

yarn @tamagui/config

Here's a basic setup with @tamagui/config:

App.tsximport { TamaguiProvider, createTamagui } from '@tamagui/core' // or 'tamagui'
import { config } from '@tamagui/config/v3'

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

// make TypeScript type everything based on your config
type Conf = typeof tamaguiConfig
declare module '@tamagui/core' { // or 'tamagui'
  interface TamaguiCustomConfig extends Conf {}
}

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

You should be ready to use any component:

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 100% the same at runtime as at compile-time, so you can wait until you're needing some extra performance to set up the compiler.

Guides

Tamagui generally doesn't require any special bundler setup, but React Native Web and the ecosystem of React Native packages often do. Tamagui provides a variety of plugins for compatibility and simplifying compiler setup.

We also have more in-depth guides:

Webpack

Powerful module bundler for modern JavaScript applications.

Metro

Fast, scalable, and serverlessr javaScript bundler for react Native.

Vite

Fast and modern development server and build tool.

Expo

Platform for creating universal native apps with JavaScript and React.

Next.js

Full-featured React framework with great developer experience.

Introduction

Edit this page on GitHub.