Installation

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
bun
npm
pnpm
yarn add @tamagui/core

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

yarn
bun
npm
pnpm
yarn add 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 and pass config to it 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'
import config from './tamagui.config'

export default function App() {
  return (
  <TamaguiProvider config={config}>
    <View width={200} height={200} backgroundColor="$background" />
  </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
bun
npm
pnpm
yarn add @tamagui/config

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

App.tsx
import { 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

We also have more in-depth guides: