Style and UI for React (web and native) meet an optimizing compiler

• @tamagui/core - Universal style library for React.
• @tamagui/static - Optimizing compiler that works with core and tamagui.
• tamagui - UI kit that adapts to every platform.

See tamagui.dev for documentation.

Tamagui lets you share more code between web and native apps without sacrificing the two things that typically suffer when you do: performance and code quality.

It does this with an optimizing compiler that outputs platform-specific optimizations, turning even styles with logic or that use constants imported from other files will flatten into a simple div (or other tag) alongside CSS on the web, or on native, a View or Text that references memoized and hoisted style objects.

Tamagui aims to be easy to start with and so you can use any of the three independently. The entirety of Tamagui works at compile time and runtime, which means in development you can avoid setting up the compiler at all (though the compiler does add some very nice data-attributes to your DOM). We recommend to start either using a starter (a few are available at npm create tamagui@latest).

The compiler can flatten a large amount of views. In the ~500px² responsive browser section of the Tamagui website, 49 of the 55 or so inline styled components are flattened to a div. The homepage gains nearly 15% on Lighthouse just by turning on the compiler.

Learn more on the website.

Installing Tamagui

To install Tamagui with all its components run:

npm install tamagui @tamagui/config

Next, create a Tamagui config file named tamagui.config.ts:

import { config } from '@tamagui/config/v2'

import { createTamagui } from 'tamagui'
const tamaguiConfig = createTamagui(config)
// this makes typescript properly type everything based on the config

type Conf = typeof tamaguiConfig

declare module 'tamagui' {

  interface TamaguiCustomConfig extends Conf {}

}
export default tamaguiConfig
// depending on if you chose tamagui, @tamagui/core, or @tamagui/web
// be sure the import and declare module lines both use that same name

Note: The v2 config imports the css driver on web and react-native on native. For react-native, import the @tamagui/config/v2-native config, and for reanimated, import the @tamagui/config/v2-reanimated config.

Usage

To use Tamagui in your Expo or Next.js projects, all you need to do is wrap your application in the TamaguiProvider:

// this provides some helpful reset styles to ensure a more consistent look
// only import this from your web app, not native
import '@tamagui/core/reset.css'

import { TamaguiProvider } from 'tamagui'
import tamaguiConfig from './tamagui.config'

export default function App() {
  return (
    <TamaguiProvider config={tamaguiConfig}>
      {/* your app here */}
    </TamaguiProvider>
  )
}

Done! Now try out some components:

import { Button, Text } from 'tamagui'

function Example() {
  return (
    <Button>
      <Text>My button</Text>
    </Button>
  );
}

Contributing

To contribute to Tamagui reference the contributing guide. To contribute to documentation reference the writing guide.