Installation

We recommend using npm create tamagui@latest to bootstrap one of our starter templates, with examples for many frameworks.

The base Tamagui style library, @tamagui/core, has only one dependency: React. It's lighter weight than React Native Web, yet gives you a much broader style API.

Install it with:

yarn
npm
bun
pnpm
yarn add @tamagui/core

If you plan to use the full UI kit, tamagui, you can avoid installing @tamagui/core altogether. Instead:

yarn
npm
bun
pnpm
yarn add tamagui

The tamagui package is a superset of core, so anywhere in the docs @tamagui/core is used, you can replace it with tamagui.

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

You can use it like so:

App.tsx
import { TamaguiProvider, createTamagui } from '@tamagui/core'
import { defaultConfig } from '@tamagui/config/v4'

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

type Conf = typeof config

// get nice types
declare module '@tamagui/core' {
  interface TamaguiCustomConfig extends Conf {}
}

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

Tamagui generally doesn't require any special bundler setup as we've worked hard to make it "just work" without configuration in a wide variety of environments.

That said, the broader React Native and React Native Web ecosystem is filled with packages that do need configuration. Tamagui provides a variety of bundler plugins that help improve that compatibility, as well as letting you opt into the optimizing compiler.

For more in-depth guides: