Installation

Get Tamagui set up, step by step

We recommend using the CLI to bootstrap an example app, even if it's only for reference as you set up your existing app:

npm create tamagui

Install

You can use the 0-dependency (outside of react itself) @tamagui/core, or move higher level with tamagui, which is a superset of core adding many components and hooks. We recommend yarn in general because it works well with both monorepos and React Native. Still, pnpm and npm work well too.

For just the core style library:

yarn add @tamagui/core

If you want tamagui, you can avoid core and just:

yarn add tamagui

Tamagui doesn't require any special bundler setup. It also doesn't necessarily require you to set up your design system with createTamagui, but we provide some helpful default setups if you want.

Beyond adding the TamaguiProvider at the root of your app, you are ready to go. For a more detailed design system setup, follow the configuration docs.

At the root of your app:

// some helpful reset styles for web:
import '@tamagui/core/reset.css'

import { TamaguiProvider, createTamagui } from 'tamagui'

// some nice defaults:
import { config } from '@tamagui/config/v2'

// you usually export this from a tamagui.config.ts file:
// this can be as simple as an empty object
const tamaguiConfig = createTamagui(config)

// this makes typescript properly type everything based on the config
type Conf = typeof tamaguiConfig
declare module '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>Hello world</Button>
}

From here, we'd recommend spending some time understanding configuration. You could also setup the compiler, but we'd recommend waiting to do that once you're well into developing your app, as Tamagui works 100% the same at runtime as at compile.

We also have more in depth guides for Next.js, Expo and Vite.

Note that while Tamagui generally doesn't require any special bundler setup, React Native Web and the ecosystem sometimes does, so we do recommend a few simple configurations for them:

Webpack

const { TamaguiPlugin } = require('tamagui-loader')

config.plugins.push(
  new TamaguiPlugin({
    config: './src/tamagui.config.ts',
    components: ['tamagui'], // matching the yarn add you chose above
  }),
)

Or manually:

// some stuff for react-native
config.plugins.push(
  new webpack.DefinePlugin({
    process: {
      env: {
        DEV: process.env.NODE_ENV === 'development' ? 'true' : 'false',
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    },
  })
)

config.resolve.alias['react-native$'] = 'react-native-web'

// set up web extensions
compiler.options.resolve.extensions = [
  '.web.tsx',
  '.web.ts',
  '.web.js',
  '.ts',
  '.tsx',
  '.js',
]

Vite

import { tamaguiExtractPlugin, tamaguiPlugin } from '@tamagui/vite-plugin'
import react from '@vitejs/plugin-react-swc'

export default {
  plugins: [
    react(),
    tamaguiPlugin(tamaguiConfig),
    // optional:
    process.env.NODE_ENV === 'production' ? tamaguiExtractPlugin(tamaguiConfig) : null,
  ].filter(Boolean),
}

Or manually:

config.define = {
  DEV: `${process.env.NODE_ENV === 'development' ? true : false}`,
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}

config.resolve.alias['react-native'] = 'react-native-web'

// set up web extensions
config.optimizeDeps.esbuildOptions = {
  ...config.optimizeDeps.esbuildOptions,
  resolveExtensions: [
    '.web.js',
    '.web.jsx',
    '.web.ts',
    '.web.tsx',
    '.mjs',
    '.js',
    '.mts',
    '.ts',
    '.jsx',
    '.tsx',
    '.json'
  ],
  loader: {
    '.js': 'jsx',
  },
}

Introduction

Configuration

Edit this page on GitHub.

Forms

Panels

Organize

Content

Visual

Etc

Installation

Install

Webpack

Vite