Installation
Get Tamagui set up, step by step
Setting up Tamagui can be easy, or take a bit of investment. We highly recommend starting with our starter templates and preset config.
Use npm create tamagui@latest
to pick one of our starter templates.
To install from scratch:
yarn add @tamagui/core
Core is just the style library. If you plan to use our full UI kit, you can
avoid installing @tamagui/core
and instead:
yarn add tamagui
The tamagui
package is a superset of core, so anywhere the docs reference
@tamagui/core
, you can replace it with tamagui
.
Next, you'll want to set up your configuration and
provide it with TamaguiProvider
:
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>)}
We have a recommended preset configuration called @tamagui/config
:
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 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>)}
And that's it!
import { Button } from 'tamagui'export default function Demo() {return <Button theme="blue">Hello world</Button>}
From here, we recommend spending some time understanding configuration.
100% of Tamagui features work at both runtime and compile-time, which makes it both easy to use and fast. Because it works fully at runtime, and because we've invested a lot into building it such that it doesn't need any special bundler configuration to work on either native or web, you can begin using Tamagui with just the above setup.
Later on, you can set up the compiler to gain more performance and some nice development helpers.
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 with that:
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.