Installation

We recommend using npm create to set up one or more of the example apps: npm create tamagui@latest. It gives you a variety of end-to-end examples, which is useful even if you plan to start from scratch or integrate into an existing app.

Install

The base Tamagui style library, @tamagui/core, has only one dependency: React. It's good for web-only, Native, or both:

yarn
bun
npm
pnpm
yarn add @tamagui/core

If you plan to use the full UI kit, you can avoid installing @tamagui/core altogether. Instead, use tamagui everywhere, as it's a strict superset of core. Anywhere in the docs where @tamagui/core is mentioned, you can replace it with tamagui:

yarn
bun
npm
pnpm
yarn add tamagui

We recommend yarn if you are using Tamagui in a monorepo to share code between apps, as it's proven reliable with React Native.

Add the optional TamaguiProvider to customize your design system and settings:

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

You can use it like so:

App.tsx
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)

// TypeScript types across all Tamagui APIs
type Conf = typeof tamaguiConfig
declare module '@tamagui/core' {
  interface TamaguiCustomConfig extends Conf {}
}

export default () => {
  return (
    <TamaguiProvider config={tamaguiConfig}>
      {/* 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

For more in-depth guides: