{"id":26457,"library":"tamagui","title":"Tamagui","description":"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.","status":"active","version":"2.0.0-rc.41","language":"javascript","source_language":"en","source_url":"https://github.com/tamagui/tamagui","tags":["javascript","typescript"],"install":[{"cmd":"npm install tamagui","lang":"bash","label":"npm"},{"cmd":"yarn add tamagui","lang":"bash","label":"yarn"},{"cmd":"pnpm add tamagui","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for core functionality","package":"react","optional":false},{"reason":"Peer dependency required for native rendering (optional for web-only)","package":"react-native","optional":true}],"imports":[{"note":"ESM-only package; CommonJS require may fail in newer versions","wrong":"const { styled } = require('tamagui')","symbol":"styled","correct":"import { styled } from 'tamagui'"},{"note":"Main export is from 'tamagui', not '@tamagui/core'","wrong":"import { Theme } from '@tamagui/core'","symbol":"Theme","correct":"import { Theme } from 'tamagui'"},{"note":"YStack is re-exported from tamagui; direct subpath imports may change","wrong":"import { YStack } from '@tamagui/stacks'","symbol":"YStack","correct":"import { YStack } from 'tamagui'"}],"quickstart":{"code":"import { createTamagui, styled, Theme, YStack, Text, Button } from 'tamagui'\nimport { config } from './tamagui.config' // assume config exported\n\nconst App = () => (\n  <Theme name='light'>\n    <YStack padding='$4' space='$2'>\n      <Text fontSize='$6' fontWeight='bold'>Hello Tamagui</Text>\n      <Button onPress={() => alert('Clicked!')}>Click me</Button>\n    </YStack>\n  </Theme>\n)\n\nexport default App\n","lang":"typescript","description":"Basic usage of Tamagui with styled components, theming, and responsive spacing tokens."},"warnings":[{"fix":"Upgrade React to version 19 or later.","message":"Tamagui v2 requires React 19. Using older React versions will cause runtime errors.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use ES module imports (import) in your project or configure bundler to handle ESM.","message":"The package is ESM-only; using require() or CJS may fail, especially in Node.js environments.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use the new 'animationsReanimated' or 'animationsCSS' imports from tamagui.","message":"The old 'animations' package has been replaced; imports from '@tamagui/animations' may not work.","severity":"deprecated","affected_versions":">=2.0.0-rc.30"},{"fix":"Set TAMAGUI_TARGET='web' in your build environment.","message":"Web-only builds now require TAMAGUI_TARGET guard to strip react-native code; missing this guard may cause errors.","severity":"breaking","affected_versions":">=2.0.0-rc.41"},{"fix":"Use named imports like import { styled } from 'tamagui'.","message":"Default export from 'tamagui' is not available; only named exports exist.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install tamagui@latest' and ensure the import path is correct (case-sensitive).","cause":"Package not installed or incorrectly referenced","error":"Module not found: Can't resolve 'tamagui'"},{"fix":"Create a Tamaqui config using createTamagui() and wrap your app with it.","cause":"Missing or invalid Tamagui configuration","error":"Uncaught Error: Tamagui must be initialized with a valid config"},{"fix":"Ensure you are using ES module import syntax and have set 'type': 'module' in package.json if applicable.","cause":"Named import 'styled' is undefined, possibly due to CJS vs ESM mismatch","error":"TypeError: Cannot read properties of undefined (reading 'styled')"},{"fix":"Upgrade React to version 19.","cause":"Using React version below 19","error":"Warning: React version mismatch. Expected React 19, found React 18"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}