Installation
Get Tamagui set up, step by step
Setting up Tamagui can be easy, or take a bit of investment. Many people incorrectly try to customize everything right away - resist that temptation. We recommend starting with starter templates, or at least preset config.
Use npm create tamagui@latest
to start from one of our many starter templates.
To install from scratch:
yarn add @tamagui/core
If you plan to use the full UI kit, tamagui
, you can avoid installing @tamagui/core
altogether and instead:
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
.
Adding the optional TamaguiProvider
is recommended as it lets you configure a variety of things:
App.tsx
import { TamaguiProvider, View } from '@tamagui/core'import config from './tamagui.config' // your configurationexport 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 add @tamagui/core @tamagui/config
And then provide it near your root:
App.tsx
import { TamaguiProvider, createTamagui } from '@tamagui/core'import { defaultConfig } from '@tamagui/config/v4'// you usually export this from a tamagui.config.ts fileconst config = createTamagui(defaultConfig)type Conf = typeof config// make imports typeddeclare 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:
Webpack
Powerful module bundler for modern JavaScript applications.
Metro
Fast, scalable, and serverless JavaScript bundler for react Native.
Vite
Fast and modern development server and build tool.
Expo
Platform for creating universal native apps with JavaScript and React.
Next.js
Full-featured React framework with great developer experience.