Installation

How to get Tamagui set up.

Tamagui is a full-featured UI kit built on top of @tamagui/core.

The instructions here are for using tamagui, a more complete set of components designed to build universal apps. It's fully tree-shakeable, so your bundler should only add components you import.

If you'd rather build your own design system on top of core, see the Design Systems guide.

Try out create-tamagui-app for a helpful starter template which comes with @tamagui/shorthands and @tamagui/theme-base for easy default shorthands, themes and tokens.

npm install tamagui

Be sure to set the environment variable TAMAGUI_TARGET to the string web or native, respectively.

Create a tamagui.config.js (or ts) file at the root of your project and export default the result of createTamagui. To start quickly you can use our pre-made one.

import { createTamagui } from '@tamagui/core'
import { shorthands } from '@tamagui/shorthands'
import { themes, tokens } from '@tamagui/theme-base'

export default createTamagui({
  themes,
  tokens,
  shorthands,
})

The next page, Configuration explains this file in detail.

Import and use the TamaguiProvider component as the top component in your app.

import React, { Suspense } from 'react'
import { TamaguiProvider } from 'tamagui'

import config from './tamagui.config'

export default function App() {
  return (
    <TamaguiProvider config={config}>
      {/* if you want nice React 18 concurrent hydration, you'll want Suspense near the root */}
      <Suspense>
        <AppContents />
      </Suspense>
    </TamaguiProvider>
  )
}

TamaguiProvider has optional props, see the docs for them here.

You're now ready to use Tamagui, import and use any components:

import { Button } from 'tamagui'

export default function Demo() {
  return <Button>Button</Button>
}

We recommend spending time getting used to configuring Core from here, skipping over the Compiler section.

The compiler is optional, and should probably be saved for setting up after you've built something you'd like to test it with - whether for consistency or performance comparison.