wwwwwwwwwwwwwwwwwww

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

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

// optional but recommended CSS reset:

import '@tamagui/core/reset.css'

import { TamaguiProvider, View } from '@tamagui/core'



export default () => (

  <TamaguiProvider>

    <View width={200} height={200} backgroundColor="red" />

  </TamaguiProvider>

)

Tamagui doesn't require any bundler setup for either web or native.

Typically you'll want to set up a few things with createTamagui though - for example media queries, or custom fonts.

The configuration documentation covers this in detail, but if you'd like to get started quick with some decent defaults we have @tamagui/config:

import { TamaguiProvider, createTamagui } from '@tamagui/core'

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' {

  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. 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.

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 of React Native packages often do, and Tamagui has a variety of plugins to aid in compatibility and make setting up the optimizing compile easy:

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 a minimal manual setup:

// 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 a minimal manual setup:

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',

  },

}

Metro

Early support for Metro web support is here with @tamagui/metro-plugin:

// Learn more https://docs.expo.io/guides/customizing-metro

const { getDefaultConfig } = require('expo/metro-config')



/** @type {import('expo/metro-config').MetroConfig} */

const config = getDefaultConfig(__dirname, {

  // [Web-only]: Enables CSS support in Metro.

  isCSSEnabled: true,

})



// 2. Enable Tamagui

const { withTamagui } = require('@tamagui/metro-plugin')

module.exports = withTamagui(config, {

  components: ['tamagui'],

  config: './tamagui.config.ts',

  outputCSS: './tamagui-web.css',

})

Previous

Introduction

Next

Introduction

Edit this page on GitHub.