tamagui

library2.0.0-rc.41jsnpmunverified

Tamagui v2.0.0-rc.41 is a UI library and optimizing compiler for React (web and native). It provides a design system with styled components, theming, and responsive props, aiming to reduce bundle size and runtime overhead through compile-time optimizations. Released as release candidates since 2023, it requires React 19 and offers deep integration with React Native. Key differentiators include its compiler that transforms styled components into optimized CSS or native code, and its cross-platform support without platform-specific code forks.

web-framework

npm install tamagui

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · TAMAGUI

tamagui

web-frameworkjavascriptv2.0.0-rc.41

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

styled

✓ import { styled } from 'tamagui'

✗ const { styled } = require('tamagui')

ESM-only package; CommonJS require may fail in newer versions

Theme

✓ import { Theme } from 'tamagui'

✗ import { Theme } from '@tamagui/core'

Main export is from 'tamagui', not '@tamagui/core'

YStack

✓ import { YStack } from 'tamagui'

✗ import { YStack } from '@tamagui/stacks'

YStack is re-exported from tamagui; direct subpath imports may change

Basic usage of Tamagui with styled components, theming, and responsive spacing tokens.

import { createTamagui, styled, Theme, YStack, Text, Button } from 'tamagui' import { config } from './tamagui.config' // assume config exported const App = () => ( <Theme name='light'> <YStack padding='$4' space='$2'> <Text fontSize='$6' fontWeight='bold'>Hello Tamagui</Text> <Button onPress={() => alert('Clicked!')}>Click me</Button> </YStack> </Theme> ) export default App

Debug

Known issues

gotchaTamagui v2 requires React 19. Using older React versions will cause runtime errors.

fix

Upgrade React to version 19 or later.

affects: >=2.0.0

gotchaThe package is ESM-only; using require() or CJS may fail, especially in Node.js environments.

fix

Use ES module imports (import) in your project or configure bundler to handle ESM.

affects: >=2.0.0

deprecatedThe old 'animations' package has been replaced; imports from '@tamagui/animations' may not work.

fix

Use the new 'animationsReanimated' or 'animationsCSS' imports from tamagui.

affects: >=2.0.0-rc.30

breakingWeb-only builds now require TAMAGUI_TARGET guard to strip react-native code; missing this guard may cause errors.

fix

Set TAMAGUI_TARGET='web' in your build environment.

affects: >=2.0.0-rc.41

gotchaDefault export from 'tamagui' is not available; only named exports exist.

fix

Use named imports like import { styled } from 'tamagui'.

affects: >=2.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'tamagui'

Package not installed or incorrectly referenced

fix

Run 'npm install tamagui@latest' and ensure the import path is correct (case-sensitive).

Uncaught Error: Tamagui must be initialized with a valid config

Missing or invalid Tamagui configuration

fix

Create a Tamaqui config using createTamagui() and wrap your app with it.

TypeError: Cannot read properties of undefined (reading 'styled')

Named import 'styled' is undefined, possibly due to CJS vs ESM mismatch

fix

Ensure you are using ES module import syntax and have set 'type': 'module' in package.json if applicable.

Warning: React version mismatch. Expected React 19, found React 18

Using React version below 19

fix

Upgrade React to version 19.

Upgrade

Version history

2.0.0-rc.41latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for core functionality

react-nativeoptionalPeer dependency required for native rendering (optional for web-only)

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/tamagui/tamagui ↗

packagehttps://www.npmjs.com/package/tamagui ↗

homepagehttps://tamagui.dev ↗